next.js: v14.2 causing build error for Material UI Icons

Link to the code that reproduces this issue

https://github.com/lucasvieirasilva/nextjs-mui-issue1

To Reproduce

Clone the https://github.com/lucasvieirasilva/nextjs-mui-issue1 repo
Install the dependencies npm install
Run build npm run build

Current vs. Expected behavior

Currently, when there’s any MUI Icon in the page the build command throws the following exception:

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at nM (/Users/lucasvieira/Projects/mui-issue1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61599)
    at nM (/Users/lucasvieira/Projects/mui-issue1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546)
    at nN (/Users/lucasvieira/Projects/mui-issue1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
    at nB (/Users/lucasvieira/Projects/mui-issue1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
    at nD (/Users/lucasvieira/Projects/mui-issue1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680)
    at nN (/Users/lucasvieira/Projects/mui-issue1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853)
    at nB (/Users/lucasvieira/Projects/mui-issue1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
    at nD (/Users/lucasvieira/Projects/mui-issue1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680)
    at nN (/Users/lucasvieira/Projects/mui-issue1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853)
    at nB (/Users/lucasvieira/Projects/mui-issue1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
 ✓ Generating static pages (5/5)

> Export encountered errors on following paths:
        /page: /

I’ve also tested only the MUI component (e.g. Grid) and the build works correctly, it only fails with MUI Icons (@mui/icons-material)

If the static pages don’t have any MUI Icon and any dynamic route page has MUI Icons the build works fine, but the page crashes when you try to access the application.

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:11:05 PDT 2024; root:xnu-10063.101.17~1/RELEASE_X86_64
  Available memory (MB): 16384
  Available CPU cores: 12
Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.6.12
Relevant Packages:
  next: 14.2.1-canary.5 // There is a newer canary version (14.3.0-canary.0) available, please upgrade! 
  eslint-config-next: 14.2.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: standalone

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

Not sure

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

next build (local)

Additional context

I’ve tested with the new v14.2.1-canary.5 version which is supposed to fix this issue, but apparently, it only fixes MUI components, not MUI icons.

Issue reference: https://github.com/vercel/next.js/issues/64369

I’ve tested with Next.js 14.1.4 and works fine.

The 14.2.1-canary.7 and 14.3.0-canary.0 versions are not working as well.

_NEXT-3119

About this issue

Original URL
State: closed
Created 3 months ago
Reactions: 8
Comments: 23 (8 by maintainers)

Commits related to this issue

Fix cjs client components tree-shaking (#64558) ## What Determine if the client module is a CJS file and `default` export is imported, then we include the whole module instead of using webpack m... — committed to vercel/next.js by huozhi 2 months ago
Fix cjs client components tree-shaking (#64558) ## What Determine if the client module is a CJS file and `default` export is imported, then we include the whole module instead of using webpack m... — committed to vercel/next.js by huozhi 2 months ago
Fix: resolve mixed re-exports module as cjs (#64681) ### Why If you have a client entry that mixing `default` re-export and `*` re-export, atm we cannot statically analyze all the exports from th... — committed to vercel/next.js by huozhi 2 months ago
Fix: resolve mixed re-exports module as cjs (#64681) ### Why If you have a client entry that mixing `default` re-export and `*` re-export, atm we cannot statically analyze all the exports from th... — committed to vercel/next.js by huozhi 2 months ago

Most upvoted comments

I’m having this issue as well!

+12

JonathanBrenner on Apr 15, 2024

This should Not be closed… I have the Exact same issue using the newest version 14.2.1-canary.7

Running in Dev works fine but when I build and then next start i get:

Error: Minified React error #306; visit https://react.dev/errors/306?args[]=%5Bobject%20Object%5D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

also using MUI Material and Icons. Everything worked fine before next 14.2

Bonus:

After the newest update I keep running out of memory too:

`> next build

▲ Next.js 14.2.1

Environments: .env.local

Creating an optimized production build … <w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOSPC: no space left on device, write uncaughtException [Error: ENOSPC: no space left on device, write] { errno: -28, code: ‘ENOSPC’, syscall: ‘write’ }`

Never seen this issue before… But it keeps happening. To fix it I delete the .next folder and then I can build again…

ElectricCodeGuy on Apr 15, 2024

To clarify about the fixes:

The mui icon related fix, which initially mentioned in the issue description, is fixed in 14.2.2. The mui material subpath import issue, such as import Container from "@mui/material/Container", is fixed on canary 14.3.0-canary.9, not landed in stable patches yet.

huozhi on Apr 18, 2024

I got a fix up in #64681 and landed, but there’s still sth need to be changed on mui side to let users get better optimization of client code. This change is landed in 14.3.0-canary.9

The case of @mui/material/Container/index.js is a client boundary and with mixied exports, both export * and export { default }. we should remove the “use client” here since it’s just a barrel file but hard to be optimized by default atm. there’s already a “use client” directive in @mui/material/Container/Container.js, so we don’t have to add another one in barrel file.

cc @oliviertassinari

huozhi on Apr 18, 2024

Landed the fix on canary, please upgrade to v14.3.0-canary.5! 🙏

huozhi on Apr 16, 2024

Just tested it now and it is not working, still getting the same issue. I don’t like to change the imports of MUI components all over my app just for this.

AbdullahElrubi on Apr 18, 2024

Taking another round of look for this case of material lib

huozhi on Apr 17, 2024

Testing on 14.3.0-canary.5 I am still having the same issue. Changing all MUI imports, not just icons, was the only fix, (and this is bad practice for MUI). Any thing I need to do to allow importing default without this error?

justinh00k on Apr 16, 2024

@huozhi the latest canary fixed the issue for me

AbdullahElrubi on Apr 23, 2024

Latest canary fixed all of my issues without changing a single import path (all of my paths were default-style and 14.2.2 upgrade was not enough).

MonstraG on Apr 21, 2024

@filmic thanks that works, however, for large projects this workaround might be very tedious to do since requires a big refactor.

Yes, you’re right. To avoid making it tedious, you can do ctrl + shift + f to do an overall search in your project, and search for @mui/icons-material/. To locate instance where you don’t use curly braces for your import. And you can also highlight what you want to change in a single file, and do ctrl + shift + h to make changes to multiple files with the same thing you’ve highlighted in one go.

And lastly for same file, you can do ctrl + h to edit multiple instance at once

Tosinkoa on Apr 16, 2024