【Vite】Could not resolve entry module “react-router” の解決方法

はじめに

React Router を v7 に上げたところ、Vite の本番ビルドが Could not resolve entry module "react-router". で失敗するようになりました。

最初は「node_modules のインストールがうまくいっていないのでは？」と疑いましたが、原因は vite.config.ts の manualChunks の書き方でした。同じエラーで困っている方の参考になればと思い、原因の切り分けと解決方法をまとめます。

環境

• Vite（build.rollupOptions.output.manualChunks でチャンク分割している構成）
• react-router-dom 7.18.4
• npm（npm ci でインストール）
• Windows / PowerShell

問題

npm run build を実行すると、次のエラーでビルドが止まりました。

error during build:
Could not resolve entry module "react-router".
    at getRollupError (file:///.../node_modules/rollup/dist/es/shared/parseAst.js:317:41)
    at error (file:///.../node_modules/rollup/dist/es/shared/parseAst.js:313:42)
    at ModuleLoader.loadEntryModule (file:///.../node_modules/rollup/dist/es/shared/node-entry.js:22023:20)
    at async Promise.all (index 2)
    at async Promise.all (index 0)

vite.config.ts では、ライブラリを役割ごとに別ファイルへ分けるため、次のように manualChunks を設定していました。

vite.config.ts（抜粋）

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        react: [
          'react',
          'react-dom',
          'react-router',
          'react-router-dom',
        ],
        // ...他のチャンク定義
      },
    },
  },
},

切り分け：インストールは正常だった

まず、react-router が本当にインストールされているかを確認しました。

> npm ls react-router
gip@3.0.0 C:\...\project
`-- react-router-dom@7.18.4
  `-- react-router@7.18.4

react-router 自体は入っています。ただし、package.json に直接書かれた依存ではなく、react-router-dom が内部で使う 間接依存（他のパッケージ経由で入ってくる依存）としてインストールされていることがわかります。

原因

manualChunks に書いたパッケージ名は、Rollup（Vite が内部で使っているバンドラー）がエラーメッセージのとおり「エントリーモジュール」として、プロジェクト直下から解決しようとします。

react-router は package.json に書かれていない間接依存だったため、ここで解決できずにビルドが失敗していました。インストールの問題ではなく、package.json に直接書かれていないパッケージを manualChunks に指定していたこと が原因です。

解決方法

manualChunks から 'react-router' の行を削除しました。

vite.config.ts（抜粋）

 manualChunks: {
   react: [
     'react',
     'react-dom',
-    'react-router',
     'react-router-dom',
   ],
 },

manualChunks では、指定したパッケージが内部で使っているモジュールも同じチャンクにまとめられます。そのため react-router を明記しなくても、react-router-dom 経由で react チャンクに入ります。

これでビルドが通り、デプロイも完了しました。

別の解決方法

react-router を直接の依存として追加する方法でも解決できます。

npm install react-router@7.18.4

この場合は、更新された package.json と package-lock.json をコミットしておきましょう。npm ci は package-lock.json の内容どおりにインストールするため、コミットを忘れると CI やデプロイ環境では react-router が直接の依存として入りません。

おわりに

ビルドエラーで「モジュールが見つからない」と言われると、まずインストールを疑いがちです。今回は npm ls で「入っているかどうか」だけでなく「直接の依存か間接依存か」まで確認したことで、設定側の問題だと切り分けられました。

React Router v7 へのアップデートで manualChunks を使っている方は、指定しているパッケージ名が package.json に直接書かれているかを確認してみてください。

参考

• Configuration Options | Rollup（output.manualChunks）
• Build Options | Vite（build.rollupOptions）
• Upgrading from v6 | React Router
• npm-ls | npm Docs

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼
https://projisou.jp