Package exports and eslint-plugin-import

2025-02-10

Package exports와 eslint-plugin-import

최근 여러 진입점을 가진 새로운 npm 패키지를 만들고 있었습니다. Vite 라이브러리 모드를 사용해 진입점을 다음과 같이 설정했습니다:

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    lib: {
      entry: {
        library: "src/index.ts",
        "some-import": "src/some-import.ts",
      },
      name: "library",
    },
  },
});

그 다음 패키지의 package.json 파일에 exports 필드를 추가했습니다:

{
  "name": "library",
  "main": "./dist/library.cjs",
  "module": "./dist/library.js",
  "types": "./dist/library.d.ts",
  "exports": {
    ".": {
      "types": "./dist/library.d.ts",
      "import": "./dist/library.js",
      "require": "./dist/library.cjs",
      "default": "./dist/library.cjs"
    },
    "./some-import": {
      "types": "./dist/some-import.d.ts",
      "import": "./dist/some-import.js",
      "require": "./dist/some-import.cjs",
      "default": "./dist/some-import.cjs"
    }
  }
}

이후 다른 프로젝트에서 이 패키지를 사용해 봤는데, TypeScript는 모듈을 정상적으로 해석했지만 eslint에서 다음과 같은 오류가 발생했습니다:

error Unable to resolve path to module 'library/some-import' import/no-unresolved

관련 eslint-plugin-import 이슈를 찾아보니 eslint-import-resolver-typescript로 교체하라는 권장 사항이 있었지만, 이 패키지를 사용한다는 이유만으로 다른 프로젝트가 설정을 바꾸도록 강제하고 싶지는 않았습니다.

그런데 같은 프로젝트에서 msw/browser를 가져올 때는 eslint에서 아무런 오류도 발생하지 않는 것을 확인했고, 그래서 msw가 어떻게 설정되어 있는지 살펴보기로 했습니다.

// No complaints from eslint!
import { setupWorker } from "msw/browser";

msw의 루트 package.json은 제 패키지와 동일했지만, 패키지 루트에 browser 디렉터리가 있었고 그 안에 또 다른 package.json이 있었습니다:

// node_modules/msw/browser/package.json
{
  "main": "../lib/browser/index.js",
  "module": "../lib/browser/index.mjs",
  "types": "../lib/browser/index.d.ts"
}

이것이 문제를 해결하는 핵심이었습니다. 리졸버가 msw/browser를 별도의 패키지처럼 취급해 정상적으로 해석할 수 있게 해 주었습니다. 그래서 제 라이브러리에도 library/some-import/package.json 경로에 추가 package.json을 만들었습니다:

{
  "main": "../dist/some-import.cjs",
  "module": "../dist/some-import.js",
  "types": "../dist/some-import.d.ts"
}

그리고 예상대로 모든 것이 잘 동작했습니다! 비슷한 문제를 겪고 계신 분들께 도움이 되었으면 합니다.