CJS 타입스크립트 프로젝트애서 esm 패키지 사용하기

2 minute read

2024-08-31

발생하는 에러

Error [ERR_REQUIRE_ESM]: require() of ES Module ... not supported.

esm 을 사용하기 위해 동적 임포트를 했는데 왜이러지?

1차 시도

이땐 그냥 dynamic import 하면 되는 줄 알았다.

근데 typescript 를 결국 cjs 로 컴파일하게 되면 결국 esm 을 해석하지 못한다. (module 이 commonjs 로 되어 있기 때문에)

작성한 코드

dynamic import

async function main() {
  console.log("hello world!", GITHUB_TOKEN);
  const Octokit = await import("@octokit/rest").then((mod) => mod.Octokit);
  
  // ...
}

구글 시트 라이브러리를 사용할 때는 아무런 문제가 있지 않았다.

그럼 어떻게 해야할까?

해결법

tsconfig.json

{
  "compilerOptions": {
    // "module": "commonjs", // [ERR_REQUIRE_ESM]: require() of ES Module
    "module": "Node16",
    "esModuleInterop": true,
    "target": "ES2022",
    "sourceMap": true,
    "outDir": "dist",
 
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
 
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": ["src/**/*"]
}

모듈시스템을 Node16 으로 지정하면 된다.

또한 esModuleInterop 을 켜주는 건 잊지 말아야 한다.

참고

링크