tsconfig baseUrl 옵션에 의한 오류 바로잡기

간단히 typeORM에 정의한 entity를 가져오려고 하였으나 TS에서 자동으로 import를 해주었음에도 모듈을 찾지 못하겠다는 에러가 나왔다.

// 자동 import된 내용
import User from "src/entities/User";

다음과 같이 바꿔주니 작동을 했지만 도대체 왜 에러가 발생하는지 원인을 파악해야했다.

// Error가 회피를 위해 바꾼 내용
import User from "../../../entities/User";

 

처음에는 모듈 관련 설정이 잘못된 줄 알고 moduleResolution 관련 설정을 살펴보았다.

tsconfig에서 컴파일 옵션 중 moduleResolution을 'node'로 설정했다면 ‘node_modules’폴더를 찾아 모듈을 검색한다.

그렇다고 저 오류를 고치기 위해 "Classic"이나 "ES6"로 옵션을 수정하면 안된다.

아래와 같은 패키지를 불러오지 못하기 때문이다.

import { GraphQLServer } from "graphql-yoga";
import cors from "cors";
import logger from "morgan";

 

결국 moduleResolution은 node로 두는 것이 맞았다. 애초에 백엔드로 사용할 것이었으니...

 

알고보니 tsconfig의 baseUrl을 "."이 아니라 "./"로 수정해주면 되는 일이었다.

 

baseURL이 "."일 때

import User from "src/entities/User";

baseURL이 "/"일 때

import User from "../../../entities/User";

 

해당 설정에 대한 공식 문서를 살펴보자

www.typescriptlang.org/tsconfig#baseUrl

TSConfig Reference - Docs on every TSConfig option

 

Lets you set a base directory to resolve non-absolute module names.

You can define a root folder where you can do absolute file resolution. E.g.

 

즉, 프로젝트 파일 구조상 ./를 baseURL로 두면 tsconfig.json이 있는 경로를 기본경로로 설정하고 기본 경로부터 차근차근 해당하는 모듈을 찾아 내려가는 방식으로 작동한다.