타입스크립트 lodash를 올바르게 import하는 방법
1. 문제 상황: lodash
import 오류
1.1 오류의 발생
타입스크립트 프로젝트에서 lodash
를 ES6 스타일로 import 할 때, 아래와 같은 문제가 발생한다.
import _ from 'lodash'; // 오류 발생
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
1.2 오류 메세지 파악
오류 메세지를 보면, export =
형식으로 선언된 모듈은 allowSyntheticDefaultImports
플래그가 활성화될 경우에만 default
import 형식을 사용할 수 있다.
1.3 오류없는 import 방법
하지만 아래와 같이 lodash
를 import하면 오류가 발생하지 않는다.
import * as _ from 'lodash';
2. 해결 방법: tsconfig.json
수정
2.1 필요한 수정사항
tsconfig.json
, 타입스크립트 컴파일 옵션을 정하는 파일에서 compilerOptions
의 esModuleInterop
플래그를 true
로 설정한다.
{
"compilerOptions": {
"esModuleInterop": true
}
}
2.2 결과
이렇게 설정 후 다시 lodash
를 ES6 스타일로 import하면, 오류가 발생하지 않는다.
import _ from 'lodash'; // 이제 오류 발생안함
3. 원인 파악: lodash
의 모듈 스타일
3.1 lodash
의 export 스타일
기본적으로 lodash
는 ES6 모듈 스타일의 export가 아닌, CommonJS 스타일의 모듈 export를 사용한다.
3.2 타입스크립트의 컴파일러 옵션
따라서 ES6 스타일로 import 해오려면, 타입스크립트의 컴파일러 옵션으로 esModuleInterop
플래그를 활성화해야 한다.