v14.2 causing build error for Material UI #64369

nunesunil · 2024-04-11T22:23:02Z

Link to the code that reproduces this issue

To Reproduce

Start the appliction for creating build(npm run build), then the build fails with the following error -

sunil@Sunils-MBP-M2 my-app % npm run build

my-app@0.1.0 build
next build

▲ Next.js 14.2.0

Creating an optimized production build ...
✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
Generating static pages (0/5) [ ]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/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61599)
at nM (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546)
at nN (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
at nB (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
at nM (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58560)
at nN (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
at nB (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
at nD (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680)
at nN (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853)
at nB (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) {
digest: '4272938947'
}

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/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61599)
at nM (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546)
at nN (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
at nB (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
at nM (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58560)
at nN (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
at nB (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
at nD (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680)
at nN (/Users/sunil/Desktop/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853)
at nB (/Users/sunil/Desktop/my-app/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: /
sunil@Sunils-MBP-M2 my-app %

Current vs. Expected behavior

The build is expected to create a static pages.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:49 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.12.2
  npm: 10.5.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.0 // Latest available version is detected (14.2.0).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

Not sure, App Router

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

next build (local), Vercel (Deployed)

Additional context

If I use h1 Tag instead of MUI Typography in page build is success.

_NEXT-3101

nizioleque · 2024-04-12T01:19:36Z

This is getting ridiculous. Every second Next.js update breaks compatibility with MUI. It was the same a couple versions ago. Do you guys really have no tests for that scenario - building a basic MUI app?

Thinkscape · 2024-04-12T04:20:20Z

My app compiles, but pages crash with:

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

To repro have a page.tsx like so:

import { Typography } from "@mui/material";

export function Page() {
  return <Typography>hello world</Typography>;
}

Juneezee · 2024-04-12T05:37:21Z

I got the same build error too with MUI 5.15.15.

I tested the canary versions since 14.1.0, and found that the last-known working canary is 14.1.1-canary.62. Starting from 14.1.1-canary.63, the build fails consistently with this prerender error all the way to 14.2.0.

   ▲ Next.js 14.1.1-canary.63
   - Environments: .env

   Creating an optimized production build ...
 ✓ Compiled successfully
   Skipping linting
 ✓ Checking validity of types    
 ✓ Collecting page data    
   Generating static pages (0/25)  [=   ]Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at nA (/home/jun/Desktop/nextapp/node_modules/.pnpm/next@14.1.1-canary.63_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61552)
    at nA (/home/jun/Desktop/nextapp/node_modules/.pnpm/next@14.1.1-canary.63_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61499)
    at nN (/home/jun/Desktop/nextapp/node_modules/.pnpm/next@14.1.1-canary.63_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64501)
    at nD (/home/jun/Desktop/nextapp/node_modules/.pnpm/next@14.1.1-canary.63_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67496)
    at nL (/home/jun/Desktop/nextapp/node_modules/.pnpm/next@14.1.1-canary.63_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66638)
    at nN (/home/jun/Desktop/nextapp/node_modules/.pnpm/next@14.1.1-canary.63_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64810)
    at nD (/home/jun/Desktop/nextapp/node_modules/.pnpm/next@14.1.1-canary.63_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67496)
    at nA (/home/jun/Desktop/nextapp/node_modules/.pnpm/next@14.1.1-canary.63_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58507)
    at nN (/home/jun/Desktop/nextapp/node_modules/.pnpm/next@14.1.1-canary.63_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64501)
    at nD (/home/jun/Desktop/nextapp/node_modules/.pnpm/next@14.1.1-canary.63_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67496) {
  digest: '680300421'
}

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

There must be something in between v14.1.1-canary.62...v14.1.1-canary.63 that breaks the build.

theexiile1305 · 2024-04-12T08:10:14Z

I can also verify the same build error with MUI 5.15.14. You can checkout an minial repository at hm-edu/shibboleth-sp-oidc#33. In this example the playwright e2e fails, because the built page cannot be correctly displayed. The exectuion of next build runs successfull but the following error occurs whenever a page is loaded via next start:

 ~shibboleth-sp-oidc: renovate/nextjs-monorepo -> pnpm start                                                                                                                              

> sp-oidc@0.1.0 start /Users/mfuchs/git/github/hm-edu/shibboleth-sp-oidc
> next start

  ▲ Next.js 14.2.0
  - Local:        http://localhost:3000

 ✓ Starting...
 ⚠ "next start" does not work with "output: standalone" configuration. Use "node .next/standalone/server.js" instead.
 ✓ Ready in 244ms
[next-auth][warn][NEXTAUTH_URL] 
https://next-auth.js.org/warnings#nextauth_url
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

0xfima · 2024-04-12T13:07:21Z

I got the same error with @mui/icons-material: 5.15.14 and next: 14.2.0

Simple example of Next.Js page

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

export default function Page() {
    return (
        <Grid container spacing={2}>
            Test
        </Grid>
}

After npm run build:
[= ]Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Jordaneisenburger · 2024-04-12T14:41:32Z

Same for me after upgrading to 14.2.0 builds started failing for pages where we use @mui/icons-material

manacy-keyvalue · 2024-04-12T14:53:15Z

Experiencing the same issue after upgrading to v14.2.
The execution of next build runs successfully but the following error occurs whenever a page is loaded via next start with the usage of @mui/icons-material:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. at nM (/Users/manacy/Desktop/projects/AM-I/crm-web/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61599) at nM (/Users/manacy/Desktop/projects/AM-I/crm-web/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/Users/manacy/Desktop/projects/AM-I/crm-web/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nN (/Users/manacy/Desktop/projects/AM-I/crm-web/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64825) at nB (/Users/manacy/Desktop/projects/AM-I/crm-web/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/Users/manacy/Desktop/projects/AM-I/crm-web/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/Users/manacy/Desktop/projects/AM-I/crm-web/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/Users/manacy/Desktop/projects/AM-I/crm-web/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/Users/manacy/Desktop/projects/AM-I/crm-web/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/Users/manacy/Desktop/projects/AM-I/crm-web/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) { digest: '2890794125' }
For pages that don't use @mui/icons-material, there is no error so far.

Also, not able to reproduce this issue in my local (run with next dev). It only occurs in the build with next start. There should be a consistent behaviour across both local development and builds.

huozhi · 2024-04-12T17:20:35Z

Downgrading mui to 5.15.6 works for me with the reproduction (next 14.2), it starts breaking since 5.15.7 with next 14.2

subvertallchris · 2024-04-12T22:13:42Z

I'm receiving this same error intermittently in prod after upgrading to 14.2.0. I can't say for sure it's from MUI but I am using MUI 5.15.3. Some symptoms different: builds fine, most things work fine, but some navigations between pages (esp if I load a particular page and click a particular Link on page) triggers it a good 90% of the time.

huozhi · 2024-04-14T15:54:57Z

Preparing a fix in #64467

### What Inherit the client boudaries from the found matched target in load barrel ### Why The root cause with the barrel transform, we missed the client boundary directive during the transform. Since the new version of mui's case looks like this: Import path page.js (server module) -> `<module>/index.js` (shared module) -> `<module/subpath>/index.js` (client module) -> `<module/subpath/sub-module.js> (client module) After our transform, we lost the `"use client"` which causes the mismatch of the transform: In `rsc` layer: the file pointing to the sub module entry (`<module/subpath>/index.js`), but without the client boundary. Fixes #64369 Closes NEXT-3101

subvertallchris · 2024-04-14T22:47:18Z

@huozhi Do you expect this to also resolve intermittent appearances of this error that appeared in production builds as described here?

lucasvieirasilva · 2024-04-15T19:05:30Z

@Jordaneisenburger same here, even after the #64467 fix, I've opened a new issue about it: #64518

### What Inherit the client boudaries from the found matched target in load barrel ### Why The root cause with the barrel transform, we missed the client boundary directive during the transform. Since the new version of mui's case looks like this: Import path page.js (server module) -> `<module>/index.js` (shared module) -> `<module/subpath>/index.js` (client module) -> `<module/subpath/sub-module.js> (client module) After our transform, we lost the `"use client"` which causes the mismatch of the transform: In `rsc` layer: the file pointing to the sub module entry (`<module/subpath>/index.js`), but without the client boundary. Fixes #64369 Closes NEXT-3101

nunesunil · 2024-04-18T19:22:22Z

Preparing a fix in #64467

@huozhi Works if "import { Typography } from '@mui/material'" but not working if "import Typography from '@mui/material/Typography'".

huozhi · 2024-04-18T20:57:03Z

@nunesunil Please check the update in #64518 (comment)

huozhi · 2024-04-24T17:20:00Z

The fix is published in 14.2.3, please upgrade to the new version 🙏

github-actions · 2024-05-09T00:04:11Z

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.

nunesunil added the bug Issue was opened via the bug report template. label Apr 11, 2024

nunesunil changed the title ~~v14.2 causing build error~~ v14.2 causing build error fro Material UI Apr 11, 2024

nunesunil changed the title ~~v14.2 causing build error fro Material UI~~ v14.2 causing build error for Material UI Apr 11, 2024

Thinkscape mentioned this issue Apr 12, 2024

[material-ui][nextjs] 14.2.0 crashes with Error: Element type is invalid mui/material-ui#41865

Closed

timneutkens added the linear: next Confirmed issue that is tracked by the Next.js team. label Apr 13, 2024

huozhi mentioned this issue Apr 14, 2024

Fix client boundary inheritance for barrel optimization #64467

Merged

huozhi closed this as completed in #64467 Apr 14, 2024

Thinkscape mentioned this issue Apr 15, 2024

[material-ui] Not working after upgrading Next.js to 14.0.4. Error: Element type is invalid. mui/material-ui#40214

Closed

2 tasks

marijaduvnjak mentioned this issue Apr 15, 2024

nextjs v14.2 cause errors on build #64403

Closed

lucasvieirasilva mentioned this issue Apr 15, 2024

v14.2 causing build error for Material UI Icons #64518

Closed

github-actions bot added the locked label May 9, 2024

github-actions bot locked as resolved and limited conversation to collaborators May 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v14.2 causing build error for Material UI #64369

v14.2 causing build error for Material UI #64369

nunesunil commented Apr 11, 2024 •

edited by padmaia

nizioleque commented Apr 12, 2024

Thinkscape commented Apr 12, 2024

Juneezee commented Apr 12, 2024 •

edited

theexiile1305 commented Apr 12, 2024 •

edited

0xfima commented Apr 12, 2024 •

edited

Jordaneisenburger commented Apr 12, 2024

manacy-keyvalue commented Apr 12, 2024

huozhi commented Apr 12, 2024

subvertallchris commented Apr 12, 2024

huozhi commented Apr 14, 2024 •

edited

subvertallchris commented Apr 14, 2024

lucasvieirasilva commented Apr 15, 2024

nunesunil commented Apr 18, 2024 •

edited

huozhi commented Apr 18, 2024

huozhi commented Apr 24, 2024

github-actions bot commented May 9, 2024

v14.2 causing build error for Material UI #64369

v14.2 causing build error for Material UI #64369

Comments

nunesunil commented Apr 11, 2024 • edited by padmaia

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

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

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

Additional context

nizioleque commented Apr 12, 2024

Thinkscape commented Apr 12, 2024

Juneezee commented Apr 12, 2024 • edited

theexiile1305 commented Apr 12, 2024 • edited

0xfima commented Apr 12, 2024 • edited

Jordaneisenburger commented Apr 12, 2024

manacy-keyvalue commented Apr 12, 2024

huozhi commented Apr 12, 2024

subvertallchris commented Apr 12, 2024

huozhi commented Apr 14, 2024 • edited

subvertallchris commented Apr 14, 2024

lucasvieirasilva commented Apr 15, 2024

nunesunil commented Apr 18, 2024 • edited

huozhi commented Apr 18, 2024

huozhi commented Apr 24, 2024

github-actions bot commented May 9, 2024

nunesunil commented Apr 11, 2024 •

edited by padmaia

Juneezee commented Apr 12, 2024 •

edited

theexiile1305 commented Apr 12, 2024 •

edited

0xfima commented Apr 12, 2024 •

edited

huozhi commented Apr 14, 2024 •

edited

nunesunil commented Apr 18, 2024 •

edited