Typescript에서 require() of ES Module

require() Of ES Module

A JavaScript error occurred in the main process
Uncaught Exception:
Error [ERR_REQUIRE_ESMI: require) of ES Module /Users/gobeomsu/ Documents/GitHub/PixelScriber/node_modules/electron-is-dev/index.js from /Users/gobeomsu/Documents/GitHub/PixelScriber/dist/main/main.js not supported Instead change the require of index.js in /Users/gobeomsu/Documents/ GitHub/PixelScriber/dist/main/main.js to a dynamic import) which is available in all CommonJS modules. at I._load (node:electron/js2c/asar_bundle:2:13642) at Object.<anonymous> (/Users/gobeomsu/Documents/GitHub/PixelScriber/ dist/main/main.js:20:43) at ._load (node:electron/js2c/asar_bundle:2:13642)

TypeScript는 import 구문을 CommonJS의 require로 변환하거나, ESM 형식으로 유지하는 두 가지 방식 중 하나를 취합니다.
electron-is-dev 모듈이 ESM 형식을 요구하는데, TypeScript 설정이나 변환 과정에서 이에 대응하지 못해 문제가 발생했습니다

• electron-is-dev 라이브러리를 ⚙️ Typescript 에서 사용하려했기 때문에 발생하는 문제
  • TypeScript에서는 import를 require로 변환 또는 모드 import로 유지, 두 가지 선택지 밖에 없음
  • 그런데, ESM 으로 달라고 하니 에러가 발생한다

해결 방법 : 타입스크립트 동적으로 가져오기 사용

let isDev: typeof import("electron-is-dev");

async function initializeApp() {
  isDev = await import("electron-is-dev");

  // 이제 isDev 변수를 사용하여 개발 환경 여부를 확인
  // 여기에 초기화 로직을 추가
}

initializeApp();

TypeScript에서 typeof import() 구문을 사용하여 electron-is-dev 모듈을 동적으로 가져오는 방식으로 문제를 해결했습니다.
이 방법은 TypeScript의 고급 타입 기능을 활용하여 ESM 모듈을 비동기적으로 가져오는 방식입니다.

Thinking

• 2024-01-26 15:07 최신 동향으로 ESM으로 바뀌고 있는 과정이라 발생한 문제