[material-ui] Not able to build the project when updating to Next.js 14.2.2 with v5.15.15

[Heet-Bhalodiya]

Steps to reproduce

Link to live example: https://codesandbox.io/p/devbox/fragrant-architecture-xjjj78?file=%2Fapp%2Fpage.tsx%3A6%2C12

Steps:

1. Start a next project with npx create-next-app@latest
2. Add MUI by running npm install @mui/material @emotion/react @emotion/styled command
3. Implement MUI components in the Next.js project.

Current behavior

The basic NextJS project runs fine after initial setup. However, after integrating MUI and using its components, the project still operates normally in development mode. But, when I build the project, I receive the following error:

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

Using use client with MUI components allows the project to build and run without errors.

I am using NextJS v14.2.2 version and v5.15.15 of MUI.

Expected behavior

After updating MUI and NextJS the above issue is happening.

The components should function correctly after a build, without needing to use use client, similar to how they did in previous versions.

Context

No response

Your environment

npx @mui/envinfo

``` System: OS: macOS 13.2.1 Binaries: Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm pnpm: 8.11.0 - ~/.nvm/versions/node/v20.9.0/bin/pnpm Browsers: Chrome: 123.0.6312.124 Edge: Not Found Safari: 16.3 npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.15 @mui/material: ^5.15.15 => 5.15.15 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @types/react: ^18 => 18.2.79 react: ^18 => 18.2.0 react-dom: ^18 => 18.2.0 typescript: ^5 => 5.4.5 ```

Search keywords: NextJS, MUI, Element type is invalid, build, use client

[Juneezee]

Duplicate of https://github.com/mui/material-ui/issues/41865.

Use import { Typography } from "@mui/material" instead of import Typography from "@mui/material/Typography".

[Heet-Bhalodiya]

Hi @Juneezee,

Thanks for the quick reply.

import Typography from "@mui/material/Typography" is working perfectly in previous versions of MUI and NextJS. Also I have used this method in my whole project so it is not feasible for me to replace all the imports.

[Juneezee]

@Heet-Bhalodiya In that case, I think you'll have to downgrade to Next.js 14.1.4 for now. See https://github.com/vercel/next.js/pull/64467#issuecomment-2065430176 too.

[danielgwilson]

@Heet-Bhalodiya In that case, I think you'll have to downgrade to Next.js 14.1.4 for now. See vercel/next.js#64467 (comment) too.

This was huge, thank you—fixed the most frustrating build bug with createTheme() I was having

The example project doesn't seem to run either (broken by 14.2.X)

https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs-ts

[Heet-Bhalodiya]

Hey Team,

The fix is published in the NextJS v14.2.3.

Closing this issue.