Typescript import 오류

문제

타입스크립트 프로젝트에서 모듈을 import 해올때 발생할 수 있는 문제다.

import cors from 'cors';
...
app.use(cors());

이렇게 모듈을 가져올때 다음과 같은 오류가 발생하며, 밑줄과 함께 간단히 확인할 수 있는문구가 나온다

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

--- 밑줄 문구 ---
(이 모듈은 'export ='를 사용하여 선언되었으며 'esModuleInterop' 
플래그를 사용하는 경우에만 기본 가져오기와 함께 사용할 수 있습니다.)

이러한 오류가 발생하여 구글링 한 결과 간단히 수정하여 해결 할 수 있다.

import * as cors from 'cors';
...
app.use(cors());

하지만 문제는 esm 스펙 상으로, * 를 사용한 import 결과는 object만 가능하기 때문에 동작하지만 올바른 방식이라고 볼 수 없다.
따라서 tsconfig에 "esModuleInterop": true를 추가함으로서 해결할 수 있다.

//tsconfig.json
{
   "compilerOptions": {
   	  ...
      esModuleInterop": true,
      ...
      }
}

이렇게 수정 해주면 기존에 작성하였던 코드로 정상적으로 사용할 수 있다.

import cors from 'cors';
...
app.use(cors());

참고자료

• https://velog.io/@bandor/esModuleInterop
• https://velog.io/@mskwon/import-as-from-lodash%EB%8A%94-%EB%90%98%EB%8A%94%EB%8D%B0-import-from-lodash-%EC%99%9C-%EC%95%88%EB%90%A8
• https://pewww.tistory.com/26#recentComments
• https://www.typescriptlang.org/tsconfig#esModuleInterop