Client shows error before optimizing dependencies

[adhami3310]

I'm using React Router as a...

framework

Reproduction

Basically what seems to me is a minimal react router app, with any external dependency (I'm using emotion here, but I have seen the issue happen with any of them)

https://github.com/adhami3310/react-router-bug-repro

System Info

System:
    OS: Linux 6.14 Arch Linux
    CPU: (16) x64 AMD Ryzen 9 7940HS w/ Radeon 780M Graphics
    Memory: 41.54 GB / 58.66 GB
    Container: Yes
    Shell: 4.0.1 - /bin/fish
  Binaries:
    Node: 23.9.0 - /usr/bin/node
    npm: 11.2.0 - /usr/bin/npm
    bun: 1.2.6 - /usr/bin/bun

Used Package Manager

npm

Expected Behavior

Either it works all the time or at least not show the error if it's optimizing the dependency.

Actual Behavior

It shows an Application error, then it magically works. Once the package has been optimized once it works without errors afterwards.

[adhami3310]

Note that

optimizeDeps: {
  entries: ["app/**/*.js"],
  force: true,
},

fixes it, but sometimes dependencies are added at runtime, at which time it also fails in the same way (then refreshing the page fixes it again).

[markdalgleish]

The issue in your repro can be fixed with the following future flag in react-router.config.ts:

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

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

When this future.unstable_optimizeDeps flag is enabled, our Vite plugin adds your routes and the client entry file to the optimizeDeps.entries array.

Note that this can cause issues with some dependencies, particularly those that are only designed for use on the server but get picked up because routes contain both client and server code, but we have a troubleshooting guide for this in the Remix docs (https://remix.run/docs/en/main/guides/dependency-optimization) which hasn't been ported over to React Router yet.

On your second point, requiring a refresh of the page when dependencies change at runtime seems to be a tradeoff with Vite's approach to dependency optimisation.