Runtime error coming from @mui/materia

[brillout]

Moved from Discord:

Hi, I'm using vite-ssr-plugin in react-ts mode and added material ui,
single component will render and work fine but I tried to add to PageShell and then I started to get error when importing files from @mui/materia at runtime

[brillout]

What's the error you get?

[asheghi]

if I import anything like this
import {createTheme} from "@mui/material/styles/createTheme";
I get this error:
Error: ERR_UNSUPPORTED_DIR_IMPORT ...\vite-ssr-app\node_modules\@mui\material\styles from ...\vite-ssr-app\dist\server\renderer\default-page-server.js

and I import like this
import {createTheme} from "@mui/material/styles/createTheme.js";
I get this:
RollupError: "createTheme" is not exported

[brillout]

Seems like @mui is wrongly published. Check out the new docs about this: https://vite-plugin-ssr.com/common-issues#libraries-containing-invalid-esm. Let me know if the solution resolves your issue.

[asheghi]

adding @mui/material and @emotion/styled" to noExternal fixed the problem, Thanks!

const config: UserConfig = {
  plugins: [react(), ssr()],
  ssr: {
    noExternal: ["@mui/material", "@emotion/styled"],
  },
};