TypeError [ERR_UNKNOWN_FILE_EXTENSION] Unknown file extension ".ts” 해결

인프런의 한 입 크기로 잘라먹는 타입스크립트(TypeScript)의 타입스크립트 컴파일러 옵션 설정하기 강의를 듣다가 난 오류를 정리한 글입니다.

---

파일 설정

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist",
    "strict": true,
    "moduleDetection": "force"
  },
  "ts-node": {
    "esm": true
  },
  "include": ["src"]
}

 

강의에 나온 방법대로 설정

 

package.json

{
  "name": "section1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^20.8.2"
  }
}

npm init 명령어 실행 후 default로 설정 (= npm init -y)
npm i @types/node 설치해줌

 

---

Error 발생

ts-node src/index.ts

컴파일과 실행을 동시에 해주는 ts-node 명령어를 사용하면
TypeError [ERR_UNKNOWN_FILE_EXTENSION] Unknown file extension ".ts” for 경로
위와 같은 에러가 발생한다.

해결 방법

여러 가지 방법을 사용해봤지만 node 버전을 LTS 버전으로 낮춰주는 방법을 쓰니 문제가 시원하게 해결되었다.

1. 버전 체크: node -v
   내가 쓰고 있던 버전은 v20.5.1
2. nvm 미설치시 설치: brew reinstall nvm
   나는 nvm 설치되어 있어 넘어갔다. homebrew 설치 되어있지 않은 사람은 그것부터 설치하고 위 명령어 실행
3. 설치된 버전 보기: nvm list
4. 사용할 버전 바꾸기: nvm use 18.18.0 (LTS 버전)
5. node -v로 다시 체크 해주면 위 설정한 버전으로 잘 바뀐 것을 확인할 수 있고 ts-node 명령어도 error 없이 이제 작동된다!

추가로

node dist/index.ts

node 명령어로 실행해주니

Error: Cannot find module 경로 ~
code: 'MODULE_NOT_FOUND',
requireStack: []
위와 같은 에러가 발생한다.

 

이는 package.json에

"type": "module",

위 코드를 추가해주면 해결된다.

+ 강의를 따라하면서 계속 새로 폴더를 만들어 환경 설정을 해줄 때 이미 만들었던 폴더의 package.json, tsconfig.json, package-lock.json 세 개 파일을 복사 붙여넣기 한 후 npm i 해주면 빠르게 똑같이 세팅이 완료된다. 이후 src 폴더를 만들고 똑같이 쓰면 된다.

 

---

[참고]

한 입 크기로 잘라먹는 타입스크립트(TypeScript)
nodejs.org
[Node.js] n으로 쉽게 Node 버전변경하기
타입스크립트 컴파일러 옵션 설정하기