Reproduction

https://github.com/astonfuture/remix-vite-optimize-dependency-crash

1. Run the dev server and force clear vite's cache:
   npm run dev -- --force or delete node_module/.vite then npm run dev

2. Navigate to the index http://localhost:5173

3. Directly navigate to page-two by typing http://localhost:5173/page-two in the address bar and hitting enter

4. Vite detects the new dependency (lodash-es), runs the optimization and reloads the page which causes it to crash with hydration errors.

System Info

System:
    OS: macOS 14.6.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 68.77 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.1 - /opt/homebrew/bin/node
    npm: 10.7.0 - /opt/homebrew/bin/npm
    Watchman: 2024.04.08.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 130.1.71.114
    Chrome: 130.0.6723.60
    Safari: 17.6
  npmPackages:
    @remix-run/cloudflare: ^2.13.1 => 2.13.1 
    @remix-run/dev: ^2.13.1 => 2.13.1 
    @remix-run/react: ^2.13.1 => 2.13.1 
    @remix-run/server-runtime: ^2.13.1 => 2.13.1 
    vite: ^5.4.10 => 5.4.10

Used Package Manager

npm

Expected Behavior

There should not be hydration errors which crash the page as you navigate

Actual Behavior

The reproduction repo above is the official Remix Cloudflare workers template with one extra route added. The new route imports a package (lodash-es) and uses it in the component. When you navigate to that page, vite detects the new package and runs its optimizer which causes a page reload. This causes all manner of errors and the page crashes.

Starting the dev server

> remix vite:dev --force

Forced re-optimization of dependencies
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

When navigating to a page with new dependencies:

7:09:40 AM [vite] ✨ new dependencies optimized: lodash-es
7:09:40 AM [vite] ✨ optimized dependencies changed. reloading

Page crashes with a white screen with console errors in the browser such as:

Uncaught TypeError: Cannot read properties of null (reading 'useState')

Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

Reloading the page after it crashes works fine, leading me to believe this has something to do with the HMR that happens when vite reloads.