Repository: material-ui
Issue: mui working with named imports only in dev and production, otherwise it errors
Labels: bug 🐛,package: icons

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] 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](https://mui.com/material-ui/guides/minimizing-bundle-size/#development-environment).

### Expected behavior 🤔

Mui should behave the same in dev and production. I also checked with the vps maintainer on [his repo](https://github.com/brillout/vite-plugin-ssr/discussions/901). It might be, that there is a publishing issue with mui.

### Context 🔦

How to fix this best?

### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
  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
```
</details>