[TroubleShooting] ERR_UNKNOWN_FILE_EXTENSION - Unknown file extension ".ts" for '...'

👋 개요

사내 디자인 시스템을 프론트엔드에 적용시키기 위한 작업 중 디자인 토큰을 github에서 contents API를 통해 json 파일을 다운로드해야 하는 상황이 생겼다.

 

(회사에서 메인 git 저장소로 github을 사용하지 않으나, 디자이너 분이 사용하기에 figma와의 연동이 가장 좋아 토큰을 github에서 관리하기로 했다.)

 

그냥 간단한 script를 짜서 돌리면 되겠다고 생각하고 typescript로 작성 후 이를 컴파일 없이 실행시키기 위해 ts-node를 설치하여 해당 .ts 파일을 실행시켰다.

$ ts-node scripts/getToken.ts

---

🚨 으아아 공습경보! 공습경보!

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /.../scripts/getToken.ts

위와 같은 에러가 발생했다.

 

구글링해보면 package.json에 "type":"module" 부분을 변경하라는 말도 있었는데

해당 프로젝트는 vite로 만들어진 프로젝트라 해당값이 "module"로 설정되어 있었고, 이 값은 변경되면 다른 문제를 야기시킬 수 있었다.

(실제로 해당 값을 바꾸면 다시 type을 module로 변경해야한다는 에러가 발생하고 지우고 다시 바꾸고 지우고 다시 바꾸고 무한루프에 빠져버릴 수 있다...)

 

근본적인 해결법은 아니라고 판단하였고, 프로젝트 빌드 결과물에 포함될 모듈도 아니고 단순히 download script를 돌릴 목적이라 프로젝트 자체에는 영향이 없었으면 좋겠어서 다른 해결법을 찾아보았다.

---

💻 해결

https://typestrong.org/ts-node/docs/options/#esm

Options | ts-node

 

구글링을 통해 답을 찾아냈다. ts-node의 esm 옵션을 true로 주면 해당 .ts파일을 실행시킬 수 있었다.

cli 명령어 상에서 option으로 줄 수도 있고, 혹은 tsconfig파일에 해당 옵션 값을 넣어 줄 수도 있다. 취향 껏 선택하여 사용하면 되겠다.

 

방법1.

// tsconfig
{
  "compilerOptions": {
    // ...
  },
  "ts-node": {
    "esm": true
  }
}

방법2.

$ ts-node --esm yourscript.ts
# 혹은
$ ts-node-esm yourscript.ts