Open astonfuture opened 2 days ago
I have seen a similar thing before, but it was hard to reproduce. I was able to reproduce the behaviour with the above repo using both Safari and Brave browsers 👍
A fix for this would be great please, thank you
I'm also experiencing this issue! Would love to see a fix 🙏
From what I understand, its causing a hook error due to two versions of React. But this is sort of beyond my React paygrade to solve.
@joshbuddy, I found a similar issue on Github that suggested the same thing about different react versions.
I tried adding dedupe: ['react', 'react-dom']
to the vite.config, as suggested in that issue, however that did not fix.
I'll keep poking around to see what can I do to find where this other version of React is coming from 👀
My guess at what is happening under the hood is that the two versions of react are coming from two different builds, and both builds are being loaded simultaneously. Conspicuously, if I do a hard refresh, Safari behaves normally again.
I think the hard refresh fix is due to the fact that the new optimized dependency is already loaded in node_modules/.vite
and so it's available when you refresh. The error is something to do with the fact that the optimization and reload happens in a HMR-ey way while the page is still loaded.
Reproduction
https://github.com/astonfuture/remix-vite-optimize-dependency-crash
Run the dev server and force clear vite's cache:
npm run dev -- --force
or deletenode_module/.vite
thennpm run dev
Navigate to the index
http://localhost:5173
Directly navigate to
page-two
by typinghttp://localhost:5173/page-two
in the address bar and hitting enterVite detects the new dependency (
lodash-es
), runs the optimization and reloads the page which causes it to crash with hydration errors.System Info
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
When navigating to a page with new dependencies:
Page crashes with a white screen with console errors in the browser such as:
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.