next.js: Next 14.0.4 breaks Mui integration that worked with 14.0.3 and older versions

Link to the code that reproduces this issue

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

To Reproduce

Run the application with npm run dev
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: next-mui-error

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: https://github.com/vercel/next.js/issues/59386 https://github.com/vercel/next.js/issues/59535

This discussion is related: https://github.com/vercel/next.js/discussions/59534

_NEXT-1967

About this issue

Original URL
State: closed
Created 6 months ago
Reactions: 24
Comments: 17 (3 by maintainers)

Commits related to this issue

Fix client reference keys of barrel-optimized files (#60685) As Barrel Optimization might split one file into multiple different modules, i.e. when you import different values from it, the target fi... — committed to vercel/next.js by shuding 5 months ago

Most upvoted comments

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)

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.
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.

mwskwong on Jan 2, 2024

Thanks for the reproduction! Also cross-posting it here: https://github.com/vercel/next.js/pull/59254#issuecomment-1853073993. We will be taking a look.

shuding on Dec 20, 2023

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

maklavani on Dec 26, 2023

The fix is landed in latest canary 🙏

huozhi on Jan 18, 2024

@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.

astrodomas on Dec 29, 2023

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';

kiranvj on Dec 27, 2023