[Node.js] TypeScript에서 import 사용하기 (ESModule)

[Node.js] typescript와 ts-node 설치하기

[Node.js] typescript와 ts-node 설치하기

 

이전에 사용했던 require 대신 import 구문을 사용하고자 새로운 프로젝트를 만들어 적용해보았다가

 

C:\...\backend\node_modules\ts-node\dist-raw\node-internal-modules-esm-resolve.js:366    
    throw new ERR_MODULE_NOT_FOUND(       
          ^
CustomError: Cannot find module 'C:\...\backend\test' imported from C:\...\backend\server.ts

 

이 에러만 오백번 봤어요🎇

 

결론은 TypeScript를 인식하지 못하고 있다는 것인데

여기저기 돌아다닌 결과, 얻은 해결 방법은 다음과 같다.

 

1. ts-node/esm

ts-node에는 ESM을 사용하여 실행할 수 있는 기능이 있으며, 이를 사용하려면 ts-node 9.1+를 설치해야 한다.

"node --loader ts-node/esm ./server.ts"

 

ts-node에 esm 설정을 해줄 수 있다.

 

2. --experimental-specifier-resolution

위 옵션까지만 지정했을 때도, 제대로 동작하지 않아 더 찾아보았다.

node 공식 문서 'import-specifiers' 부분에서 말하기를

 

...
Bare specifier resolutions are handled by the Node.js module resolution algorithm. All other specifier resolutions are always only resolved with the standard relative URL resolution semantics.
Like in CommonJS, module files within packages can be accessed by appending a path to the package name unless the package's package.json contains an "exports" field, in which case files within packages can only be accessed via the paths defined in "exports".
For details on these package resolution rules that apply to bare specifiers in the Node.js module resolution, see the packages documentation.
...

 

갈피가 잡힐 듯 잡히지 않아서 추가로 stackoverflow를 찾아보니

`--experimental-specifier-resolution=node`라는 ts-node 옵션을 설정해야 하는 것 같았다.

 

node --experimental-specifier-resolution=node --loader ts-node/esm index.ts

 

ts-node v10.8 이상부터는 tsconfig.json에서 바로 옵션을 설정할 수 있다.

{
    ...
    "ts-node": {
        "esm": true,
        "experimentalSpecifierResolution": "node"
    }
}

 

 

📍 참고로‼

옵션을 사용할 때는, 파일 경로의 앞 부분에 작성을 해주어야 한다.
또한, 이전 글에서 작성했던 것처럼, ts-node는 성능 이슈로 개발 모드에서만 사용하고 프로덕션 모드에서는 컴파일 후, 실행하는 것을 권장한다.

 

https://stackoverflow.com/questions/63742790/unable-to-import-esm-ts-module-in-node/65163089#65163089

Unable to import ESM .ts module in node

https://webpack.kr/api/cli/

Command Line Interface | 웹팩

https://webpack.kr/api/cli/#troubleshooting

Command Line Interface | 웹팩