Typescript Cannot find module에러

타입스크립트를 이용해 서버를 구축하면 실행할 때 JS로 변환해야 서버를 실행할 수 있습니다.

이를 위해 tsconfig.json파일에서 많은 설정을 하는데요.

 

"nodemon --exec ts-node src/app.ts"

 

위 명령어로 서버를 실행하면 안나던 오류가 

"npx tsc && node dist/app.js"

 

위 명령어로 서버를 실행하면 

 

at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._resolveFilename (/Users/jojunhui/Desktop/project/algorithm-project/server2.0/node_modules/module-alias/index.js:49:29)
    at Function.Module._resolveFilename (/Users/jojunhui/Desktop/project/algorithm-project/server2.0/node_modules/tsconfig-paths/lib/register.js:103:40)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/jojunhui/Desktop/project/algorithm-project/server2.0/dist/controller/userController.js:15:39)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)

 

위와 같이 module을 찾을 수 없다는 오류가 계속해서 발생하였습니다.

이렇게 module참조를 하지 못하는 이유는 tsconfig.json파일에서 찾을 수 있는데요.

{
  "compilerOptions": {
    "strict": true, // use strict 사용
    "target": "es2016", // 컴파일 문법
    "preserveValueImports": false,
    "module": "commonjs", // 모듈 포맷
    "esModuleInterop": true,
    "outDir": "./dist", //타입스크립트가 자바스크립트로 빌드된 파일들 모아두는 폴더명
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true, // 타입orm관련
    "emitDecoratorMetadata": true, // 타입orm관련
    "forceConsistentCasingInFileNames": true,
    "strictPropertyInitialization": false,
    "pretty": true,
    "sourceMap": true,
    "allowJs": true,
    "noEmit": false,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  },
  "typeRoots": [
    "./node_modules/@types",
    "./src/types"
  ],
  "include": [
    "./src/**/*"
  , "app.ts", "src/app.js"  ],
  "exclude": [
    "node_modules",
    "tests"
  ]
}

 

제 jsconfig.json파일의 paths를 보면 ./src/* 경로를 볼 수 있습니다.

저는 이렇게 설정해놓고 개발환경에서 다른 파일을 참조할 때 import test from "@/testroute/asd/" 이런식으로 참조했는데요.

이는 ts파일에선 참조할 수 있지만 js파일로 변환시킨 후 실행하면 참조하지 못하기 때문에 오류가 발생했었습니다.

 

이 오류를 해결하려면 js파일을 모아둔 경로 또한 paths에 지정해줘야합니다.

저 같은 경우는 outDir : "./dist"이기 때문에 dist폴더에 js파일이 있습니다.

따라서 paths를 아래와 같이 변경하면 오류를 해결할 수 있었습니다.

"paths": {
      "@/*": ["./src/*", "./dist/*"],
    }