[Typescript] Cannot find module 'X' Error in TypeScript

[문제]

 

Cannot find Module 'X' Error in TypeScript

 

[원인]

타입스크립트에서 해당 모듈을 못 찾아서 오류가 발생하는 것이다.

 

[해결방법]

해당 모듈이 없는지, 해당 모듈이 자바스크립트로 되어 있는데 타입을 못 받아오는 건지, 경로를 못 읽는 것인지 여부를 살펴보아야 한다. tsconfig.json 타입스크립트 설정, webpack.config.js 웹팩 설정 등 종합적으로 살펴본다.

 

가장 먼저, 텍스트 에디터에서 파일 수정이 정상적으로 반영되었는지 살펴본다. 파일 수정이 정상적으로 반영되지도 않았는데 문제 해결할려고 시도하는 것만큼 미련한 짓은 없다.

 

필자가 그랬다... 1시간을 버렸다. Visual Studio Code 는 Intellij 와 다르게 빌드 시 자동으로 반영되지 않으므로 항상 저장이 되었는지 확인한다.

 

1. 해당 모듈 설치 확인

해당 모듈이 설치되어 있는지 확인한다. 간혹 NPM 으로 설치한 모듈들이 node.js 에서 사용하는 라이브러리들을 사용하곤 하는데 webpack 에서 node.js 의 핵심 모듈들을 제외시켜 직접 설치해야 한다.  [React] Reference Error: Buffer is not defined :: 골드에그 (tistory.com) 참고 바란다.

 

2. 타입스크립트 모듈 분석 확인

tsconfig.json 에서 moduleResolution 속성이 node 인지 체크한다.

{
  "compilerOptions": {
//+ "moduleResolution": "node",
  }
}

TypeScript: Documentation - Module Resolution (typescriptlang.org) 페이지를 살펴보면 모듈을 해석하는 방법이 Classic, Node 두 가지 방법이 있다고 소개하고 있다. NPM 으로 설치한 모듈들은 따로 상대경로를 주지 않으므로 Node 로 바꾸어야 한다.

 

3. 타입스크립트 include 설정 확인

tsconfig.json 에서 include 속성에 해당 모듈이 포함되어 있는지 확인한다.

{
  "compilerOptions": {
    // ...
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "src/**/*.spec.ts"]
}

include src/**/* 경로가 해당 모듈을 포함하고 있는지 확인해야 하며 포함되지 않는다면 추가해야 한다.

node_moudles 폴더는 제외한다.