This feature only affects development. It does not impact production builds.

Dependency optimization

Remix introduced automatic dependency optimization in development behind the future.unstable_optimizeDeps Future Flag. This allows you to opt-into this behavior which will eventually become the default in some future version of Remix - a.k.a. React Router (1, 2). This flag is intended to remain "unstable" into React Router v7 as there is some additional bundling-related work coming that will ease adoption of the flag. We plan to stabilize the flag once that work is completed in v7.

In development, Vite aims to prebundle dependencies so that it can efficiently serve up those dependencies on-demand. To do this, Vite needs to know where to start crawling your app's module graph to look for dependencies.

Previously, Remix did not inform Vite to start dependency detection at route modules nor at the client entry. That meant that in development, Vite would encounter new dependencies as you navigated around in your app resulting in 504 Outdated Dependency errors. Consequently, the development experience could feel janky at times since those errors could cause HMR to break or link navigations to be aborted. Navigation could also feel sluggish as processing dependencies interactively could sometimes be slow.

For more information, see Vite's Dep Optimization Options.

Troubleshooting

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]

This is usually caused by a misconfigured dependency. You use publint to check if the offending package is misconfigured. To fix the issue, you'll need to use npm why or pnpm why to determine which of your direct dependencies to add to optimizeDeps.exclude.

For example, let's say your app is running into this error:

✘ [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]

Sure enough, publint reports that the jimp package is misconfigured. Then, you determine that jimp is an indirect dependency being pulled in by your svg2img direct dependency:

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

Finally, you add svg2img to optimizeDeps.exclude, which should fix the issue:

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