TypeScript 사용할 때 'Cannot find module ...' 에러

TypeScript
TypeScript

웹팩과 타입스크립트를 공부하면서 자동판매기 프로젝트를 진행하다가 문제가 발생했다.
처음에 loader등의 웹팩 설정에서 뭘 잘못한 줄 알았다. 결론적으로 문제는 tsconfig.js파일을 수정해 해결했다.

node_modules로 설치한 다른 라이브러리 모듈을 찾지 못하는 문제였는데, 예를 들어 npm install --save redux로 리덕스를 설치하고

1
2
// app.ts
import { CreateStore } from 'redux'

위와 같이 불러오려고 했는데 모듈을 찾지 못한다고 에러가 발생했다.
(참고로 @types/redux는 더이상 사용되지 않는다.)

1
2
ERROR in [at-loader] ./src/app.ts:1:16
    TS2307: Cannot find module 'redux'.

‘ts-loader’를 사용했을 때는 VS Code의 문제(PROBLEMS)탭에서 'redux' 모듈을 찾지 못했습니다.라고 나왔고, ‘awesome-typescript-loader’를 사용했을 때는 터미널 탭에서 위와 같이 웹팩이 실행되면서 Cannot find module 'redux'라고 나왔는데, 이건 환경에 따라 다를 수도 있을 것 같다.

문제가 발생했을 때의 tsconfig.js는 다음과 같았는데

1
2
3
4
5
6
7
8
9
10
{
  "compilerOptions": {
    "outDir": "./dist",
    "noImplicitAny": true,
    "module": "ES6",
    "target": "ES5",
    "allowJs": true,
    "sourceMap": true,
  }
}

포스팅 하단에 적어둔 참고 링크들에서 다음과 같은 해결방법을 찾았다. 다음과 같이 "moduleResolution": "node"를 추가했더니 문제가 해결되었다.

1
2
3
4
5
6
7
8
9
10
11
{
  "compilerOptions": {
    "outDir": "./dist",
    "noImplicitAny": true,
    "module": "ES6",
    "target": "ES5",
//+ "moduleResolution": "node",
    "allowJs": true,
    "sourceMap": true,
  }
}

위 옵션을 추가해도 해결되지 않는다면, 나의 경우처럼 VS Code를 종료하고 다시 열어야 해결될 수도 있다.

moduleResolution옵션의 기본값은 타입스크립트 공식문서에서 다음과 같이 쓰여있다.

1
module === "AMD" or "System" or "ES6" ? "Classic" : "Node"

module 옵션이 AMD, System, ES6(혹은 ES2015)일 경우에 기본값은 Classic이고 나머지는 Node이다.

타입스크립트 공식문서의 Module Resolution항목에 모듈 분석 전략 두 가지 방법인 Classic과 Node에 대한 설명이 나와있다.

간단하게 정리하면 import { b } from "moduleB"와 같이 상대 경로가 아닌 모듈(non-relative module) 불러오기에서 Classic과 달리 Node 설정은 ‘node_modules’폴더를 찾아 모듈을 검색한다.

/root/src/A.ts파일에 아래과 같이 상대 경로가 아닌 모듈(non-relative module) 불러오기를 했다고 하면

1
2
// /root/src/A.ts
import { b } from "moduleB"

Classic 설정은 다음과 같은 순서로 moduleB를 찾는다.

  1. /root/src/moduleB.ts
  2. /root/src/moduleB.d.ts
  3. /root/moduleB.ts
  4. /root/moduleB.d.ts
  5. /moduleB.ts
  6. /moduleB.d.ts

Node 설정은 다음과 같이 ‘node_modules’폴더를 찾아 해당 모듈을 검색한다.

  1. /root/src/node_modules/moduleB.ts
  2. /root/src/node_modules/moduleB.tsx
  3. /root/src/node_modules/moduleB.d.ts
  4. /root/src/node_modules/moduleB/package.json (if it specifies a “types” property)
  5. /root/src/node_modules/moduleB/index.ts
  6. /root/src/node_modules/moduleB/index.tsx
  7. /root/src/node_modules/moduleB/index.d.ts
  8. /root/node_modules/moduleB.ts
  9. /root/node_modules/moduleB.tsx
  10. /root/node_modules/moduleB.d.ts
  11. /root/node_modules/moduleB/package.json (if it specifies a “types” property)
  12. /root/node_modules/moduleB/index.ts
  13. /root/node_modules/moduleB/index.tsx
  14. /root/node_modules/moduleB/index.d.ts
  15. /node_modules/moduleB.ts
  16. /node_modules/moduleB.tsx
  17. /node_modules/moduleB.d.ts
  18. /node_modules/moduleB/package.json (if it specifies a “types” property)
  19. /node_modules/moduleB/index.ts
  20. /node_modules/moduleB/index.tsx
  21. /node_modules/moduleB/index.d.ts

참고링크

Share Comments