[material-ui] Compatibility issues with Remix #44993
Comments
davidbielik
added
the
status: waiting for maintainer
|
Updates: swapping react dependencies to canary versions remove that hydration issue and solve the contained/text issue, but shows a different error: -"react": "^18.2.0",
-"react-dom": "^18.2.0"
+"react": "18.3.0-canary-01ab35a9a-20240228",
+"react-dom": "18.3.0-canary-01ab35a9a-20240228",New hydration error |
|
After more testing, the only way to have it barely functional was to add But this results in extreme slowness ~35 seconds to render a page. Is the answer that MUI doesn't work with Vite/Remix and we should wait until "true ESM Support"? |
|
Hey @davidbielik, thanks for reaching out. May I ask you to test this resolution on your package.json: "resolutions": {
"@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/material",
"@mui/material-pigment-css": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/material-pigment-css",
"@mui/private-theming": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/private-theming",
"@mui/styled-engine": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/styled-engine",
"@mui/styles": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/styles",
"@mui/system": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/system",
"@mui/types": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/types",
"@mui/utils": "https://pkg.csb.dev/mui/material-ui/commit/8a28484f/@mui/utils",
},And removing the This is to test if #43264 would fix it. |
DiegoAndai
added
status: waiting for author
DiegoAndai
changed the title
DiegoAndai
changed the title
|
Hi @DiegoAndai thanks - here's the result. |
github-actions
bot
added
status: waiting for maintainer
|
And what do you get when adding: // vite.config.ts
ssr: {
noExternal: [
/^@mui\/icons-material/
]
} |
DiegoAndai
added
status: waiting for author
|
That works, though just adding mui increases load time from < 50m up to ~10 seconds, even in a production build. The only thing I've added was MUI |
github-actions
bot
added
status: waiting for maintainer
|
Ok, so it seems this would be fixed by #43264. Thanks for the quick response. May I ask you to do a final test with: "resolutions": {
"@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/2422d845/@mui/material",
"@mui/material-pigment-css": "https://pkg.csb.dev/mui/material-ui/commit/2422d845/@mui/material-pigment-css",
"@mui/private-theming": "https://pkg.csb.dev/mui/material-ui/commit/2422d845/@mui/private-theming",
"@mui/styled-engine": "https://pkg.csb.dev/mui/material-ui/commit/2422d845/@mui/styled-engine",
"@mui/styles": "https://pkg.csb.dev/mui/material-ui/commit/2422d845/@mui/styles",
"@mui/system": "https://pkg.csb.dev/mui/material-ui/commit/2422d845/@mui/system",
"@mui/types": "https://pkg.csb.dev/mui/material-ui/commit/2422d845/@mui/types",
"@mui/utils": "https://pkg.csb.dev/mui/material-ui/commit/2422d845/@mui/utils",
},And no |
DiegoAndai
added
status: waiting for author
|
empty
Still ~4 seconds + hydration error
|
github-actions
bot
added
status: waiting for maintainer
DiegoAndai
added
bug 🐛
|
I created a repro: https://github.com/DiegoAndai/material-ui-issue-44993-repro There's definitely something not working, I'll continue investigating |
|
Hey @davidbielik, I got my repro working with these changes: DiegoAndai/material-ui-issue-44993-repro@2287c6b (This is only a test, that May I ask you if you might've also been missing the |
|
Hey @DiegoAndai I'm also attempting to figure out why I've got a number of warnings going on with Remix and MUI. This thread appears to be top of (at least my) Google search for
The Remix plugin should be handling the stuff the React plugin would normally handle. Having both plugins leads to some duplication. If you pull down your repro and run HMR appears non functional when both plugins are used at once. |
|
So I poked around with this a bit more, and have a solution that doesn't have any console warnings or errors, but does have some cavaets. You can find it here: https://github.com/stabback/material-ui-issue-44993-repro (just check the commits authored by me since the fork) Notably:
I've also tested to make sure theming still works (in case the tailwind issue was indicative of a wider styling concern) and can confirm that MUI useTheme and sx props are still working. Also worth noting - MUI 6.4.3 blows up with this. I need to use the versions from the commit @DiegoAndai was previously using. It'd be great to better understand when that work will be made public. |
Steps to reproduce
Steps:
npx create-remix@latest remix-mui-bugnpm install @mui/material @emotion/react @emotion/styled<Button>Current behavior
Hydration errors (and also for some reason the button converts from
variant="contained"tovariant="text"upon hydration?)Expected behavior
I should be able to
npm installmui and not have hydration errorsContext
I followed the advice here: #39765 by adding this provider but still seeing the error
Your environment
npx @mui/envinfoSearch keywords: remix Warning: Prop
charSetdid not match. Server: "null" Client: "utf-8" Error Component StackThe text was updated successfully, but these errors were encountered: