mui working with named imports only in dev and production, otherwise it errors

[schaschko]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

I'm using vite-plugin-ssr, but the error should be the same with different tools. Reproduce error:

yarn create vite-plugin-ssr -> react-ts
cd vite-ssr-project/
yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material

Add mui to pages/index/index.page.tsx (in l. 2 and l.9)

import { Counter } from './Counter'
import MenuIcon from '@mui/icons-material/Menu'; // add this

export { Page }

function Page() {
  return (
    <>
      <MenuIcon /> // and this
      <h1>Welcome</h1>
      This page is:
      <ul>
        <li>Rendered to HTML.</li>
        <li>
          Interactive. <Counter />
        </li>
      </ul>
    </>
  )
}

Current behavior 😯

yarn dev works, yarn prod will throw runtime error when navigating to localhost:3000:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

This error can be "fixed" by adding

ssr: {noExternal: ["@mui/material", "@mui/utils", "@mui/base", "@mui/icons-material"]},

to vite.config.ts. Unfortunately now yarn dev is broken:

7:13:10 PM [vite] Error when evaluating SSR module /node_modules/@mui/icons-material/Menu.js:
|- TypeError: require is not a function

What is going on here? It should work in production the same as in dev?

It is possible to do a different "fix" (via named imports):

In pages/index/index.page.tsx change import MenuIcon from '@mui/icons-material/Menu'; to import { Menu as MenuIcon } from '@mui/icons-material'; In this case, even ssr: {noExternal: ["@mui/material", "@mui/utils", "@mui/base", "@mui/icons-material"]}, is not needed. It works in dev and prod. Problem is, my machine is running out of memory then, so this "fix" is not possible. Also this should not be done, see Mui guide.

Expected behavior 🤔

Mui should behave the same in dev and production. I also checked with the vps maintainer on his repo. It might be, that there is a publishing issue with mui.

Context 🔦

How to fix this best?

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 6.3 Arch Linux
  Binaries:
    Node: 18.15.0 - /usr/bin/node
    Yarn: 1.22.19 - ~/.local/bin/yarn
    npm: 9.5.0 - ~/.local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 113.0.1
  npmPackages:
    @emotion/react: ^11.10.6 => 11.11.0
    @emotion/styled: ^11.10.6 => 11.11.0
    @mui/base:  5.0.0-beta.1
    @mui/core-downloads-tracker:  5.13.1
    @mui/icons-material: ^5.11.16 => 5.11.16
    @mui/material: ^5.12.1 => 5.13.1
    @mui/private-theming:  5.13.1
    @mui/styled-engine:  5.12.3
    @mui/system:  5.13.1
    @mui/types:  7.2.4
    @mui/utils:  5.13.1
    @types/react: ^18.0.8 => 18.2.6
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^4.9.4 => 4.9.5

[michaldudak]

Thanks for reporting this. I responded in the discussion you linked: vikejs/vike#901 (reply in thread)