esModuleInterop 속성을 이용한 Import 에러 해결

함수의 테스트를 진행하다,

import difference from 'lodash/difference';

difference();

의 구문으로 인해

TypeError: difference_1.default is not a function

라는 에러가 발생한 것을 확인했습니다.

 

이번 포스팅에서는 관련된 내용에 대해 정리해 볼 예정입니다.

---

lodash에서는 CommonJS 스펙의 require를 사용합니다.

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

해당 문제를

// 1
require(~~~);

// 2
import * as ~~~

의 구문을 사용하여 해결할 수도 있지만,

moment ( https://www.npmjs.com/package/moment ) 와 같이, * 를 사용하여 import 하려는 대상의 타입이 Object가 아닌 경우에는 ES6의 모듈 사양에 호환되지 않게 됩니다.

 

우리는 이 때, tsconfig의 컴파일 옵션 중 --esModuleInterop flag의 수정을 통해 이를 해결할 수 있습니다.

// tsconfig.json - 저의 경우는 jest.tsconfig.json 입니다 :D

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    ...
  },
  ...
}

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

해당 옵션을 통해 위에서 예시로 들었던 코드는 아래와 같이 트랜스파일링 되며, 그 결과 정상적으로 import 하는 것이 가능해집니다.

// Before
import difference from 'lodash/difference';
difference();

// After
const difference = __importDefault(require('lodash/difference'));
difference();

 

* 타입스크립트의 Compiler Options에 대한 정보를 좀 더 알고 싶다면

https://www.typescriptlang.org/docs/handbook/compiler-options.html

Handbook - Compiler Options

해당 링크를 참고하시면 좋을 듯 합니다 :D

---

포스팅 봐주셔서 감사합니다!

수정되어야 할 부분이 있으면 언제든 코멘트로 남겨주세요~