Repository: material-ui
Issue: [material-ui] Not working after upgrading Next.js to 14.0.4. Error: Element type is invalid.
Labels: external dependency,package: material-ui,nextjs

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Steps to reproduce 🕹

I created a sample repository [here](https://github.com/dus4nstojanovic/material-ui-next-14-0-4).

Steps:

1. Create a new Next.js project: `npx create-next-app@latest` (select the `app router` and `typescript`),
2. Install Material-UI: `npm install @mui/material @emotion/react @emotion/styled @mui/material-nextjs @emotion/cache`
3. Wrap the children in the root layout with the `AppRouterCacheProvider`, as it is described [here](https://mui.com/material-ui/guides/nextjs/),
4. Add any `@mui/material` component above the `{children}` in the Root layout (I added the `<CSSBaseline />` but also tried with another `Typography`):

```
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AppRouterCacheProvider>
          <CssBaseline />
          {children}
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}
```

6. Add any `@mui/material` component to  the `app/page.tsx` file. I tried `Box` and `Typography`.

```
import Image from "next/image";
import styles from "./page.module.css";
import { Box, Typography } from "@mui/material";

export default function Home() {
  return (
    <main className={styles.main}>
      <Typography>Hello!</Typography>
    </main>
  );
}
```

7. Run the project: `npm run dev`
8. You will see the following error:

<img width="1026" alt="image" src="https://github.com/mui/material-ui/assets/24550782/8cadf1b3-2446-4354-a9a1-a0820f131b18">


> Note: Somehow it works when I remove all `@mui/material-ui` components from the layout  (`CSSBaseline` in the above example) - but it should be allowed and normal to have mui components in the root layout.


### Current behavior 😯

The error:

```
Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.
```


### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
System:
    OS: macOS 14.1.2
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.18.0/bin/yarn
    npm: 10.2.5 - ~/Repos/material-ui-next-14-0-4/node_modules/.bin/npm
  Browsers:
    Chrome: 120.0.6099.109
    Edge: Not Found
    Safari: 17.1.2
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @mui/base:  5.0.0-beta.27
    @mui/core-downloads-tracker:  5.15.0
    @mui/material: ^5.15.0 => 5.15.0
    @mui/material-nextjs: ^5.15.0 => 5.15.0
    @mui/private-theming:  5.15.0
    @mui/styled-engine:  5.15.0
    @mui/system:  5.15.0
    @mui/types:  7.2.11
    @mui/utils:  5.15.0
    @types/react: ^18 => 18.2.45
    react: ^18 => 18.2.0
    react-dom: ^18 => 18.2.0
    typescript: ^5 => 5.3.3
```
</details>