Material UI breaks Remix SPA build (but works fine in regular Remix apps) #9632
Comments
npapagna
changed the title
|
This has come up before and I believe the underlying issue is that MUI is not properly configured for ESM/CJS which fails the Remix server build. Even in SPA mode, Remix does a server build so it can render your root component on the server at build time to generate the The best workaround I know of is to put any MUI (or otherwise non-server-friendly code) in your startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<ThemeProvider theme={createTheme(esES)}>
<CssBaseline />
<RemixBrowser />
</ThemeProvider>
</StrictMode>
);
}); |
|
Thanks a lot, @brophdawg11. That makes sense. |
|
@brophdawg11 I've been working on this, and even thought the cliend side works fine, this solution means we cannot use the theme in the server. This makes it hard to use MUI to render the I tried Looking at the package.json definition in Is there any way to make this work in the server side without bundling material packages via |
|
From what I understand, MUI needs to fix their published package files and |
|
why was this closed with no answer? |
|
Because OP stated
|
Reproduction
Clone https://github.com/npapagna/remix_spa_mui_repro and follow steps to reproduce described in the README.md file.
System Info
System: OS: macOS 13.6.6 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 4.37 GB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm pnpm: 8.14.0 - /usr/local/bin/pnpm Browsers: Brave Browser: 124.1.65.126 Chrome: 126.0.6478.61 Safari: 16.6 npmPackages: @remix-run/dev: ^2.9.2 => 2.9.2 @remix-run/node: ^2.9.2 => 2.9.2 @remix-run/react: ^2.9.2 => 2.9.2 vite: ^5.1.0 => 5.3.1Used Package Manager
npm
Expected Behavior
I was expecting
npm run buildto finish successfully.Actual Behavior
Running
npm run buildfails with the following error:Tried using
vite-plugin-cjs-interop,noExternal, andserverModuleFormat: 'cjs'invite.config.tsto fix this error without success.Notice that even though the file mentioned in the error above (
node_modules/@mui/material/locale/index.js) does not have a default export (the recommended fix included in the error message doesn't work),npm run buildworks fine when I setssr: trueinvite.config.ts.I know this does not make sense in a SPA app, but I found this because I'm trying to migrate the frontend of a regular Remix app to a SPA one (and the frontend code builds just fine in the regular Remix app).
The text was updated successfully, but these errors were encountered: