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

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

About this issue

Original URL
State: closed
Created 3 months ago
Reactions: 31
Comments: 15 (5 by maintainers)

Commits related to this issue

Fix client boundary inheritance for barrel optimization (#64467) ### What Inherit the client boudaries from the found matched target in load barrel ### Why The root cause with the barrel tran... — committed to vercel/next.js by huozhi 3 months ago
Fix client boundary inheritance for barrel optimization (#64467) ### What Inherit the client boudaries from the found matched target in load barrel ### Why The root cause with the barrel tran... — committed to vercel/next.js by huozhi 3 months ago

Most upvoted comments

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?

+20

nizioleque on Apr 12, 2024

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

Thinkscape on Apr 12, 2024

Preparing a fix in https://github.com/vercel/next.js/issues/64467

huozhi on Apr 15, 2024

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

Jordaneisenburger on Apr 12, 2024

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.

0xfima on Apr 12, 2024

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

huozhi on Apr 24, 2024

@nunesunil Please check the update in https://github.com/vercel/next.js/issues/64518#issuecomment-2063478810

huozhi on Apr 18, 2024

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

huozhi on Apr 12, 2024

I can also verify the same build error with MUI 5.15.14. You can checkout an minial repository at https://github.com/hm-edu/shibboleth-sp-oidc/pull/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.

theexiile1305 on Apr 12, 2024