Next 14.0.4 breaks Mui integration that worked with 14.0.3 and older versions

[schimi-dev]

Link to the code that reproduces this issue

https://github.com/schimi-dev/next-mui-bug-reproduction

To Reproduce

1. Run the application with npm run dev
2. Go to http://localhost:3000

Current vs. Expected behavior

Current behavior

The console log:

Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:43345)
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:43088)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at a_ (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:50165)
    at ak (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:49406)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46647)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:41727)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:41727)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ag (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:7923)
    at C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13014
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13038)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ag (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:7923)
    at C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13014
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13038)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ag (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:7923)
    at C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13014
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13038)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ag (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:7923)
    at C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13014
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13038)
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:43088)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:41727)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ag (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:7923)
    at C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13014
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13038)
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:43088)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at a_ (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:50165)
    at C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:38901
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:39374)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at a_ (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:50165)
 ⨯ Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:43345)
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:43088)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at a_ (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:50165)
    at ak (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:49406)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46647)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:41727)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:41727)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ag (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:7923)
    at C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13014
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13038)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ag (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:7923)
    at C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13014
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13038)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ag (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:7923)
    at C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13014
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13038)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ag (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:7923)
    at C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13014
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13038)
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:43088)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:41727)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at ag (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:7923)
    at C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13014
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:13038)
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:43088)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at a_ (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:50165)
    at C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:38901
    at ab (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:39374)
    at e (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:46298)
    at aS (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:48276)
    at a_ (C:\Users\schimpelsberger\schimi_dev\next-mui-bug-reproduction\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:50165)

The UI in the browser:

Expected behavior

No error is logged to the console.
The UI in the browser is displayed without an error.
(That's how the app behaved with 14.0.3)

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
Binaries:
  Node: 20.10.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.5-canary.19
  eslint-config-next: 14.0.5-canary.19
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

The integration between Mui and the App Router was done according to:
https://mui.com/material-ui/guides/nextjs/

These issues might be related:
#59386
#59535

This discussion is related:
#59534

_NEXT-1967

[OlegLustenko]

We have the same issue!

It was introduced with this PR #59254

So 14.0.4-canary.41 version is fine, but everything higher than this breaks MUI

ccing folks who worked in the relevant PRs

cc: @shuding @huozhi

[shuding]

Thanks for the reproduction! Also cross-posting it here: #59254 (comment). We will be taking a look.

[maklavani]

MUI created a new page for installation on Next.js.
Next.js Integration.

Installing the dependencies

npm install @mui/material-nextjs @emotion/cache

Configuration

Inside app/layout.tsx, import the AppRouterCacheProvider and wrap all elements under the <body> with it:

 // app/layout.tsx
+ import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'; // or `v14-appRouter` if you are using Next.js v14

 export default function RootLayout(props) {
   const { children } = props;
   return (
     <html lang="en">
       <body>
+        <AppRouterCacheProvider>{children}</AppRouterCacheProvider>
       </body>
     </html>
   );
 }

[schimi-dev]

@maklavani

Yes I know that, my reproduction setup includes the new way of integration. But with Next 14.0.4 it works neither way. The 'old' way where you have to write your own ThemeRegistry and the new way, that is included in the reproduction lead to the same error.

[maklavani]

@schimi-dev
I had the same issue then I added 'use client' on every page where I used MUI and it worked.

[kiranvj]

Having the same issue with "next": "14.0.4", "@mui/material": "^5.15.2", "@mui/material-nextjs": "^5.15.0"

I could fix it with below work arounds, but the expectation is to work without these.

Fix 1 : Use default exports

import Box from '@mui/material/Box';

instead of

import { Box } from '@mui/material';

Fix 2: Use use client; where ever you use named export like below.

'use client';
import React from 'react';
import { Box } from '@mui/material';

[astrodomas]

@schimi-dev I had the same issue then I added 'use client' on every page where I used MUI and it worked.

But that's not a solution.

Experiencing the same issues also.

[joshke]

+1 same issue. None of the two fixes are viable solutions for my project.

[astrodomas]

Also, does anyone know if @mui/lab, @mui/system, @mui/base are covered with Nextjs out of the box @mui package optimization?

[2chanhaeng]

I also fixed this error with @kiranvj 's way like this fork.
This is a pretty good workaround and may be a clue to solving the issue… well I think?

[mwskwong]

So basically, the issue is reproducible when using optimizePackageImports with several libraries (@mui/maetrial in this case, but also noticed some others commented antd). From my testing, this issue won't immediately appear as soon as an MUI component is used but requires a certain combination of things to trigger.

Workarounds (note that these are NOT solutions)

1. Instead of using named import in RSC, use default import, i.e.

   - import { Typography } '@mui/material';
   + import Typography '@mui/material/Typography' ;

   Why this works. Because we are essentially NOT using optimizePackageImports here since we are no longer importing components from the barrel file.

2. Make all components that use MUI components Client Components, i.e.

   + 'use client';
   import { Typography } '@mui/material';

   Why this works. Because yet again, we are NOT using optimizePackageImports here. When the parent component is a client component, Webpack takes over and uses the usual tree shaking here.