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

[jrjake]

Link to the code that reproduces this issue

https://github.com/jrjake/nextjs-mui-bug

To Reproduce

1. Use my repo (or any MUI project)
2. Ensure package.json has "type": "module"
3. Use MUI component in layout.js. Ensure MUI is 1.15.13, it is not broken in 1.15.5.
4. You will get "Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object." when running npm run dev.

Current vs. Expected behavior

This was working with Nextjs 14.1.3 and MUI 1.15.5, but I recently tried upgrading to MUI 1.15.13 and got this strange error.

When I console.log(the component), I get {} when "type": "module", but I get [Function (anonymous)] as expected when running without "type": "module".

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Wed Mar  6 19:35:04 UTC 2024
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.3
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

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

App Router

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

next dev (local)

Additional context

No response

[ariannargesi]

The repository is empty. Please push your code into it @jrjake

[jrjake]

The repository is empty. Please push your code into it @jrjake

Yep, my mistake! I've pushed the code up now.

[Tosinkoa]

If anyone is facing this error, a fix I found for it is:

Change how you import material ui package from this:
import PieChartIcon from '@mui/icons-material/PieChart'

To this:
import { PieChart } from '@mui/icons-material'

[Wei102193]

its fixed in 14.3.0-canary.9. #64518 (comment)

[jrjake]

its fixed in 14.3.0-canary.9. #64518 (comment)

Apologies for delay in response, I can confirm this is fixed with that canary build.

Does anyone know if this specific fix will be backported to 14.2.x? I tried testing with a more recent 14.3.0 canary but it appeared to be using React 19 beta, and I'm guessing that will delay 14.3.0 release for a decent while. I also believe Material UI has not added/claimed support for React 19, which will likely delay my ability to use them together for even longer.

[khuezy]

Looks like the latest canary reintroduced the error, cc @huozhi

[huozhi]

This should be fixed with latest 14.2.x, please upgrade to 14.2.3

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.