ts-node 로 TypeScript (*.ts)파일 실행하기 Unknown file extension ".ts"

 

사건의 발단

Vue로 SSR 튜토리얼을 해보던 중이었습니다. 저는 타입스크립트로 해보고 싶었기에 타입스크립트로 작성하였습니다.

https://vuejs.org/guide/scaling-up/ssr.html#basic-tutorial

Server-Side Rendering (SSR) | Vue.js

 

./src/main-ssr.ts에 코드를 타입스크립트로 작성하고 node src/main-ssr.ts를 실행했습니다.

아니나 다를까 에러를 뿜어내더군요.

 

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"

 

역시 nodejs로는 ts파일을 실행할 수 없었다는 것을 깨닫고 타입스크립트는 어떻게 실행하나 찾아보았습니다.

 

사건의 전개

nodejs 환경에서 타입스크립트를 사용하려면 ts-node를 사용해야 한다는 것을 알게 되었습니다.

따라서 ts-node와 필요한 패키지를 설치해주었습니다.

 

npm i -g ts-node
npm i -g typescript
npm i -D tslib @types/node

 

tsconfig.json 파일에 다음 코드를 추가해줍니다.

 

 "ts-node": {
    "esm": true
  }

 

그리고 ts-node main-ssr.ts를 실행하였습니다.

 

(node:26160) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

 

위 에러 메시지를 보고 package.json에 "type": "module"을 추가해주었습니다.

 

하지만 "type": "module"을 추가하니 다시 .ts 파일을 실행 못한다는 오류가 나옵니다.

 

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension

 

그래서 찾아보니 "type": "module"을 지우면 해결된다고 하더군요.

 

stackoverflow 답변

 

그렇게 저는 "type": "module"을 설정해야되고 지워야되는 무간지옥 무한루프에 빠지고 말았습니다.

 

 

tsconfig.json 문제인거 같아 copilot으로 수정하면서 TypeScript 공식 문서를 찾아보고 ts-node 관련 글을 찾아보았습니다.

 

찾아보니 역시 compilerOprions 설정이 잘못되어서 그런거였습니다. tsconfig.json에 다음 코드를 추가해줍니다.

 

  "compilerOptions": {
    "preserveValueImports": false,
    "module": "CommonJS",
  }

 

그리고 ts-node로 파일을 실행시켜보았습다.

 

성공!

결말

ts-node를 사용할 때에 tsconfig.json 파일에 컴파일러옵션에 "module": "CommonJS"를 사용해야 한다는 것을 알게 되었습니다. "ES6"같은걸로 하면 작동하지 않았는데 이것은 Nodejs가 CommonJS을 지원하기 때문인것 같습니다.

 

 

참고

https://offbyone.tistory.com/445

https://www.npmjs.com/package/ts-node

https://www.typescriptlang.org/tsconfig#Emit_6246

https://stackoverflow.com/questions/62096269/cant-run-my-node-js-typescript-project-typeerror-err-unknown-file-extension