vite dependencies optimized issue

[Vinorcola]

I'm facing very recurrent issues with Vite that display the following message:

new dependencies optimized: `whathever node_module package`
optimized dependencies change.reloading

This is very annoying since it provoques unwanted page reloads and navigations issues (aka links & form submits not working).

I tried to add the following conf in vite.config.ts:

export default defineConfig({
    // ...
    optimizeDeps: {
        entries: ["app/**/*.{js,jsx,ts,tsx}"],
    },
}

But this is not working.

Is there a way to make vite optimize all dependencies app-wide at startup?

[vofronte]

Hi @Vinorcola!

The entries option often isn't enough because it can miss dependencies that are loaded dynamically, which routers do all the time.

What might work better is giving Vite a direct hint with optimizeDeps.include.

Try watching your terminal for the new dependencies optimized: some-package message. When you see one, add that package name to the list.

Something like this could help:

// vite.config.ts
optimizeDeps: {
  // Keep this to help the scanner
  entries: ["app/**/*.{js,jsx,ts,tsx}"], 

  // Add this to force-include the tricky ones
  include: [
    'react-router-dom',
    '@remix-run/router' 
    // ... and any others that cause reloads
  ]
}

This tells Vite to pre-bundle them at startup, which should help prevent the reloads.

[dylantf]

For our app I found the vite option did not seem to help, but adding the flag in the react-router config fixed it:

import type { Config } from '@react-router/dev/config';

export default {
  future: {
    unstable_optimizeDeps: true,
  },
} satisfies Config;