MUI causing Hydration issues with simple styling. Remix:vite 2.7.2 #8913
Replies: 9 comments 23 replies
-
|
Was the previous working version also on Vite? Or did you just switch to Vite as of Remix v2.7.2? |
Beta Was this translation helpful? Give feedback.
-
|
BTW. I'm currently not really in a hurry to upgrade to vite, but regularly make a check if it works. |
Beta Was this translation helpful? Give feedback.
-
|
regarding the canary recommendation. I've seen it below, but the one that solved the issue for some was version 18.3.0 canary and by now we have 18.3.1 stable. I'd prefer upgrading when I don't need to use canary. I hope its not related to the release policy change on the react side. I want to be able to pin a version of my libs so I can move them only when I need and not be dragged along by one lib and forced to adjust everything for it to work. |
Beta Was this translation helpful? Give feedback.
-
|
Yes, previously React canary was going to be v18.3. However, there were some features that they wanted to push out ahead of RSC support, etc. So they published a minor v18.3 and canary was now the new v19. It's currently in Release Candidate (RC), so if you want to fix the hydration issues, you should install |
Beta Was this translation helpful? Give feedback.
-
|
So with canary I don't have the error. But now fetcher.load makes full reloads when the loader returns async "json" not using the json() function. Very weird. I have reverted the thing for now and will check back in a month or two. |
Beta Was this translation helpful? Give feedback.
-
|
Still having the loading fallback issue with the latest canary, and a fresh install of when deployed to GH pages. Anyone an idea how to solve this? |
Beta Was this translation helpful? Give feedback.
-
|
The previous working version was not Vite. I switched to Vite as of Remix v2.7.2 coming from 2.6.2. Using Hydration fallback I managed to get a page to render, however, I feel like that is just a bandaid over a larger problem. I don't think I should need that on every page. Additionally I am also getting some wrangler error messages that are preventing some pages from working. They may be unrelated and an additional issue to resolve after the page can render successfully. |
Beta Was this translation helpful? Give feedback.
-
|
I also have the same issue and would like to find a solution/workaround and get on with using vite. |
Beta Was this translation helpful? Give feedback.
-
|
Have you tried installing React Canary? React 18.2 has issues with hydration on full documents. See my template https://github.com/kiliman/remix-vite-template |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, I'll try it out. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you again @kiliman for the quick response. Your suggestion solved my issues. |
Beta Was this translation helpful? Give feedback.
-
|
@kiliman - whats the purpose of |
Beta Was this translation helpful? Give feedback.
-
|
Having the same issue. Checkout the Codesandbox The entry.client.tsx / entry.server.tsx / root.tsx code is copied from the official mui-remix-example. I compared the html generated in entry.server.tsx with the one displayed in the browser and it's identical (obviously ignoring the codesandbox script). |
Beta Was this translation helpful? Give feedback.
-
|
Same issue here. Many projects and companies rely on mui. This makes it impossible to use remix vite in these contexts. |
Beta Was this translation helpful? Give feedback.
-
|
+1 |
Beta Was this translation helpful? Give feedback.
-
|
I've created a sample repo showing Remix+MUI+Vite ⚡️ StackBlitz |
Beta Was this translation helpful? Give feedback.
-
|
Ok looks good so far... so the errors might be caused by the emotion cache stuff. Edit: i oversaw the suppressHydrationWarning on the body element. I adjusted my example (locally) and it works |
Beta Was this translation helpful? Give feedback.
-
|
That I'm using React Canary to prevent hydration issues with Remix full document hydration. |
Beta Was this translation helpful? Give feedback.
-
|
It seems like defaults exports in material are a problem: Also importing static resources like logos is not working.
We were using meta imports with new URL instead of the vite way ?url |
Beta Was this translation helpful? Give feedback.
-
|
I have been exclusively using the |
Beta Was this translation helpful? Give feedback.
-
|
I have created an example repo here Tested on node 20.11.1 |
Beta Was this translation helpful? Give feedback.
-
|
Just curious if any solution was ever discovered? |
Beta Was this translation helpful? Give feedback.
-
|
I am not sure if this answer is right for you. Replaced react and react-dom on dependencies in package.jon. canary is one of the solution |
Beta Was this translation helpful? Give feedback.
-
|
canary was the solution... with react 18.2.0 it was not working. There are a few restrictions:
|
Beta Was this translation helpful? Give feedback.
-
|
just tried it with seems to be working fine |
Beta Was this translation helpful? Give feedback.
-
|
I am also experiencing this hydration error, even with |
Beta Was this translation helpful? Give feedback.
-
|
yes it's mostly the dropdowns! |
Beta Was this translation helpful? Give feedback.
-
|
Have we found a solution for this? We started building with Remix, Vite, and MUI, and are now completely dependent on the app. The app has grown, and this hydration issue is killing our productivity. |
Beta Was this translation helpful? Give feedback.
-
|
Fixes in underlying packages seem to be good, but they aren't yet used by Remix out of the box. "dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^7.0.1", <-- released March 28, 2025
"@mui/material": "^7.0.1",
"@remix-run/node": "^2.16.3",
"@remix-run/react": "^2.16.3",
"@remix-run/serve": "^2.16.3",
"react": "^19.1.0", <-- release March 28, 2025
"react-dom": "^19.1.0"
},
"devDependencies": {
"@remix-run/dev": "^2.16.3",
"@types/react": "^19.0.12",
"@types/react-dom": "^19.0.4",
"typescript": "^5.8.2",
"vite": "^6.2.3",
"vite-tsconfig-paths": "^5.1.4"
},
"overrides": {
"@remix-run/react": {
"react": ">=18.2.0", <-- instead of "^18.2.0"
"react-dom": ">=18.2.0",
"@types/react": ">=18.2.0"
}
}, |
Beta Was this translation helpful? Give feedback.
-
|
This is still a problem as of today. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I have recently upgraded to remix:[email protected] using vite. This has broken every single page when using MUI. It appears to be caused by any styling added to the MUI components using the sx prop, possibly others as well.
e.g. The below example as an index page will cause the following errors
src:
error 1:
error 2:
If I change the index to simply be a Box without the styling prop, the page renders error free.
This issues only appeared after updating the remix:run 2.7.2 (with cloudflare pages) and node 20.11.1. It was not present on 2.6.x and node 18.17.x
Any help to diagnose and fix the issue would be appreciated.
Beta Was this translation helpful? Give feedback.
All reactions