타입스크립트 lodash를 올바르게 import하는 방법

Typescript
Typescript

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, 타입스크립트 컴파일 옵션을 정하는 파일에서 compilerOptionsesModuleInterop 플래그를 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 플래그를 활성화해야 한다.


마치며

함께 읽으면 좋은 글

당신이 IT 종사자라면 옵시디언(Obsidian) 노트 앱을 꼭 써야하는 이유
노트 작성과 정보 관리는 개발자, 학자, 작가, 그리고 일반인들에게 필수적인 작업입니다. 어쩌면 당신은 Evernote, Notion, 또는 기본 메모 앱을 사용하고 있을지 모릅니다. 하지만 오늘은 특별한 노트앱, 옵시디언(Obsidian)에 대해 이야기해보려 합니다. 이 앱이 왜 주목받고 있는지, 그리고 당신이 이를 사용해야 하는 이유에 대해서 깊게 들어가보겠습니다. 옵시디언(Obsidian)의 기본
성능 향상을 위한 Mongoose lean(): MongoDB Lean은 왜 빠를까
개발자로서, 성능 최적화는 우리가 고려해야 할 중요한 부분 중 하나입니다. MongoDB와 Mongoose를 사용할 때, lean() 함수를 사용하여 성능을 향상시킬 수 있습니다. 이 글에서는 lean() 함수가 무엇인지, 왜 이것이 빠른지, 그리고 어떻게 사용하는지에 대해 알아보겠습니다. lean 예시 lean() 함수의 사용법을 이해하는 것은 중요합니다. 이 섹션에서는 lean의 실제 사용 예시와 체인을 사용할
웹에서 GPU를 쓴다고? WebGPU: WebGPU란?
들어가며 웹의 세계에서 GPU를 이용해야 할 이유가 점점 늘고 있다. 그래픽 처리, 데이터 분석, 심지어는 웹 기반 게임까지, 이러한 다양한 분야에서 GPU의 힘은 무시할 수 없다. 하지만 웹에서 GPU를 이용하는 방법에는 여러가지 제약이 따른다. 이제 그 해결책으로 주목받고 있는 것이 바로 WebGPU입니다. 본 글에서는 WebGPU의 개념부터 실제 사용법, 그리고 WebGL과의