Remixは開発環境で、future.unstable_optimizeDeps 将来の機能フラグによって自動的な依存関係の最適化を導入しました。これにより、この動作を選択することができます。これは、Remixの次のメジャーバージョン（別名React Router v7 (1、2）でデフォルトになります。

開発では、Viteは依存関係を事前にバンドルすることを目指しており、それにより、それらの依存関係をオンデマンドで効率的に提供することができます。そのためには、Viteはアプリのモジュールグラフのどこから依存関係を探索するかを知る必要があります。

以前は、RemixはViteに、ルートモジュールやクライアントエントリで依存関係の検出を開始するように指示していませんでした。つまり、開発では、アプリ内を移動するとViteは新しい依存関係に出くわし、504 Outdated Dependencyエラーが発生していました。その結果、開発体験は、これらのエラーがHMRを壊したり、リンクナビゲーションを中止させたりすることがあるため、時折ぎくしゃくしているように感じられる可能性がありました。また、依存関係をインタラクティブに処理することが遅くなる場合があり、ナビゲーションも遅くなる可能性がありました。

詳細については、Viteの依存関係最適化オプションを参照してください。

トラブルシューティング

`Failed to resolve entry for package`

✘ [ERROR] Failed to resolve entry for package "<package>". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-pre-bundle]

これは通常、依存関係の構成ミスが原因です。 publintを使用して、問題の依存関係が誤って構成されているかどうかを確認できます。この問題を解決するには、npm whyまたはpnpm whyを使用して、どの直接依存関係をoptimizeDeps.excludeに追加するかを判断する必要があります。

たとえば、アプリが次のエラーを発生しているとします。

✘ [ERROR] Failed to resolve entry for package "jimp". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-pre-bundle]

確かに、publintはjimpパッケージが誤って構成されていると報告しています。次に、jimpがsvg2imgの直接依存関係によって引き込まれている間接的な依存関係であると判断します。

❯ npm why jimp
[email protected]
node_modules/jimp
  jimp@"^0.16.1" from [email protected]
  node_modules/svg2img
    svg2img@"^1.0.0-beta.2" from the root project

最後に、optimizeDeps.excludeにsvg2imgを追加すると、この問題が解決されます。

vite.config.ts

export default defineConfig({
  optimizeDeps: {
    exclude: ["svg2img"],
  },
});

トラブルシューティング
Failed to resolve entry for package