🫧TS:: import 에러 발생시

✔︎상황::

import cors from "cors";

이렇게 모듈 가져오면서 아래 오류와 맞닥뜨림..

 

 

✔︎에러::

This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.

 

 

✔︎발생 원인::

cors는 CommonJS 스펙의 require를 사용.

따라서, 위 코드와 같이 CommonJS 모듈을 ES6 모듈 코드베이스로 가져오려고 할 때 문제가 발생함.

이때 esModuleInterop 속성이 위의 코드 처럼 true로 설정될 경우, ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져오게 함.

이렇게되면 아래와 같이 정상적으로 코드가 트랜스파일링 되며, 문제 없이 import 하는 것이 가능함.

app.ts

import cors from "cors";
 app.use(cors({
     origin: '*',
 }));

app.js

const cors_1 = __importDefault(require("cors"));

 

 

✔︎해결법::

tsconfig.json 수정이 필요합니당

"esModuleInterop": true 추가 ㄱㄱ

{
   "compilerOptions": {
   	  ...
      esModuleInterop": true,
      ...
      };
}