Package exports and eslint-plugin-import

2025-02-10

パッケージのエクスポートと 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-import-resolver-typescript に切り替えることを推奨するeslint-plugin-import の issueを見つけました。しかし、このパッケージを使うためだけに、ほかのプロジェクトに設定変更を強いるのは避けたかったのです。

また、同じプロジェクトで 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"
}

すると、すべて期待どおりに動作しました。同じような問題に遭遇している方の参考になれば幸いです。