ESM + TypeScript

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/.../index.js

import { createRequire } from "node:module"
 
const require = createRequire(import.meta.url)
 
// sibling-module.js은 CJS 모듈입니다.
const siblingModule = require("./sibling-module")

{
  "name": "my-project",
  "version": "0.0.1",
  "type": "module",
  ...
}

{
  "compilerOptions": {
    "module": "nodenext", // es6, esnext, node16, nodenext...
    "moduleResolution": "nodenext" // classic, node, node16, nodenext...
  }
}

// ./bar.ts
import { helper } from "./foo" // only works in CJS
 
// ./foo.ts
export function helper() {
  // ...
}
 
helper()

// ./bar.ts
import { helper } from "./foo.js" // works in ESM & CJS
 
helper()

{
  "name": "my-package",
  "exports": {
    ".": "./lib/index.js",
    "./lib": "./lib/index.js",
    "./lib/index": "./lib/index.js",
    "./lib/index.js": "./lib/index.js",
    "./feature": "./feature/index.js",
    "./feature/index": "./feature/index.js",
    "./feature/index.js": "./feature/index.js",
    "./package.json": "./package.json"
  }
}

{
  "name": "my-package",
  "exports": {
    ".": "./lib/index.js",
    "./feature/*.js": "./feature/*.js",
    "./feature/internal/*": null
  }
}

// package.json
{
  "name": "my-package",
  "type": "module",
  "exports": {
    ".": {
      // TypeScript 프로젝트에서 타입을 사용할 시에 Entry-point로 지정할 타입 파일
      "types": "./types/index.d.ts",
      // ESM 프로젝트에서 import할 시에 Entry-point로 지정할 파일
      "import": "./esm/index.js",
      // CJS 프로젝트에서 require할 시에 Entry-point로 지정할 파일
      "require": "./commonjs/index.cjs"
    }
  },
  // Node.js의 오래된 버전을 사용하고 있는 CJS 프로젝트에서 fall-back으로 지정할 파일
  "main": "./commonjs/index.cjs",
  // Node.js의 공식적인 필드는 아니지만 esbuild, rollup 등 몇몇 번들러에서 ESM 지원을 위한 목적으로 사용될 수 있는 필드
  "module": "./esm/index.js",
  // TypeScript의 오래된 버전을 사용하고 있는 프로젝트에서 Fall-back으로 지정할 타입 파일
  "types": "./types/index.d.ts"
}

{
  "javascript.preferences.importModuleSpecifierEnding": "js",
  "typescript.preferences.importModuleSpecifierEnding": "js"
}

yarn init -y
yarn add -D typescript
yarn tsc --init

├── lib
│   ├── index.js
│   ├── index.cjs
│   └── ...
├── package.json
├── src
│   ├── index.ts
│   └── ...
└── tsconfig.json

{
  "name": "@seo-practice/practice-library",
  "version": "0.0.1",
  "type": "module",
  "exports": {
    ".": {
      "import": "./lib/index.js",
      "require": "./lib/index.cjs",
      "types": "./lib/index.d.ts"
    }
  },
  "main": "./lib/index.cjs",
  "module": "./lib/index.js",
  "source": "./src/index.ts",
  "types": "./lib/index.d.ts",
  ...
}

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "NodeNext",
    "rootDir": "./src",
    "moduleResolution": "NodeNext",
    "declaration": true,
    "outDir": "./lib",
    ...
  }
}

// rollup.config.js
import esbuild from "rollup-plugin-esbuild"
 
const packageJson = require("./package.json")
 
const bundle = (config) => ({
  ...config,
  input: "src/index.ts",
  external: (id) => !/^[./]/.test(id),
})
 
export default [
  bundle({
    plugins: [esbuild()],
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "es",
        sourcemap: true,
      },
    ],
  }),
]

{
  "scripts": {
    "build": "yarn build:rollup",
    "build:rollup": "yarn clear && rollup -c && tsc --emitDeclarationOnly",
    "clear": "rimraf lib"
  }
}

// src/index.ts
export { getSlug } from "./utils.js"
 
// src/utils.ts
const slugify = (str: string) =>
  str
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/(^-|-$)+/g, "")
 
export const getSlug = (str: string) => {
  const slug = slugify(str)
  return slug === "-" ? "" : slug
}

$ yarn build

// lib/index.cjs
'use strict';
 
Object.defineProperty(exports, '__esModule', { value: true });
 
const getSlug = (...)
 
exports.getSlug = getSlug;
//# sourceMappingURL=index.cjs.map

// lib/index.js
const getSlug = (...)
 
export { getSlug };
//# sourceMappingURL=index.js.map

// practice-node-cjs/package.json
{
  "name": "practice-node-cjs",
  "version": "0.0.1",
  "scripts": {
    "build": "tsc",
    "start": "yarn build && node ./dist/index.js"
  },
  "dependencies": {
    "@seo-practice/practice-library": "*"
  }
  ...
}

// practice-node-cjs/tsconfig.json
{
  "compilerOptions": {
    "incremental": true,
    "composite": true,
    "target": "es2016",
    "module": "commonjs",
    "rootDir": "./src",
    "moduleResolution": "node",
    "outDir": "./dist",
    ...
  }
}

// practice-node-cjs/src/index.ts
import { getSlug } from "@seo-practice/practice-library"
 
const title = "Hello World"
const slug = getSlug(title)
console.log(slug)

// practice-node-cjs/dist/index.js
"use strict"
Object.defineProperty(exports, "__esModule", { value: true })
const practice_library_1 = require("@seo-practice/practice-library")
const title = "Hello World"
const slug = (0, practice_library_1.getSlug)(title)
console.log(slug)

hello-world

// practice-node-esm/package.json
{
  "name": "practice-node-esm",
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "build": "tsc",
    "start": "yarn build && node ./dist/index.js"
  },
  "dependencies": {
    "@seo-practice/practice-library": "*"
  }
  ...
}

// practice-node-esm/tsconfig.json
{
  "compilerOptions": {
    "incremental": true,
    "composite": true,
    "target": "ESNext",
    "module": "NodeNext",
    "rootDir": "./src",
    "moduleResolution": "NodeNext",
    "outDir": "./dist",
    ...
  }
}

// practice-node-esm/dist/index.js
import { getSlug } from "@seo-practice/practice-library"
 
const title = "Hello World"
const slug = getSlug(title)
console.log(slug)