문제
타입스크립트 프로젝트에서 lodash를 import 해올때 발생할 수 있는 문제다.
import _ from 'lodash'; // 오류 발생
console.log(_.isNil(undefined));개발할 때 ES6 스타일의 모듈 임포트(import _ from 'lodash')를 사용하는데 익숙한데, 이를 lodash에도 똑같이 적용하려고 보면 import를 할 수 없다고 오류가 발생한다. 오류 메세지를 살펴보면...
export = 형식으로 선언된 모듈은 allowSyntheticDefaultImports 플래그가 올라가 있을 경우에만 default import 형식을 사용할 수 있다는 내용이다.
근데 import _ from 'lodash' 대신에 import * as _ from 'lodash'는 오류없이 잘 돌아간다.
import * as _ from 'lodash'; // 오류 없음
console.log(_.isNil(undefined));해결
타입스크립트 컴파일 옵션을 정하는 파일인 tsconfig.json의 옵션을 건드려줘야한다. compilerOptions의 esModuleInterop 플래그를 true로 설정해주면된다.
{
"compilerOptions": {
// ...
"esModuleInterop": true
// ...
}
}import _ from 'lodash'; // 이제 오류 발생안함
console.log(_.isNil(undefined));왜 안됨
기본적으로 lodash 패키지가 ES6 모듈 스타일의 export가 아닌, CommonJS 스타일의 모듈 export를 하고 있어서 발생하는 문제다. import * as _ from 'lodash'와 같은 경우에는 해당 모듈에서 *를 통해 import 하는 대상이 Object인 경우에 동작하지만, 그렇지 않은 경우에는 마찬가지로 에러가 발생한다.(lodash는 Object라서 됨)
따라서 우리가 쓰는 코드 베이스에서 ES6 모듈이 아닌 것을 ES6 스타일로 import 해오려면, 타입스크립트의 컴파일러 옵션으로 esModuleInterop 플래그를 세워줘야한다. 그러면 타입스크립트 -> 자바스크립트 코드 트랜스파일링 과정에서 타입스크립트가 이를 잘 핸들링해서 트랜스파일링 해주게 되고, 오류가 없어지게 된다.
Reference
