Closed
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
I created a sample repository here.
Steps:
- Create a new Next.js project:
npx create-next-app@latest(select theapp routerandtypescript), - Install Material-UI:
npm install @mui/material @emotion/react @emotion/styled @mui/material-nextjs @emotion/cache - Wrap the children in the root layout with the
AppRouterCacheProvider, as it is described here, - Add any
@mui/materialcomponent above the{children}in the Root layout (I added the<CSSBaseline />but also tried with anotherTypography):
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<AppRouterCacheProvider>
<CssBaseline />
{children}
</AppRouterCacheProvider>
</body>
</html>
);
}
- Add any
@mui/materialcomponent to theapp/page.tsxfile. I triedBoxandTypography.
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>
);
}
- Run the project:
npm run dev - You will see the following error:
Note: Somehow it works when I remove all
@mui/material-uicomponents from the layout (CSSBaselinein 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 🌎
npx @mui/envinfo
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