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

dus4nstojanovic · 2023-12-15T16:17:34Z

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Steps to reproduce 🕹

I created a sample repository here.

Steps:

Create a new Next.js project: npx create-next-app@latest (select the app router and typescript),
Install Material-UI: npm install @mui/material @emotion/react @emotion/styled @mui/material-nextjs @emotion/cache
Wrap the children in the root layout with the AppRouterCacheProvider, as it is described here,
Add any @mui/material component above the {children} in the Root layout (I added the <CSSBaseline /> but also tried with another Typography):

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AppRouterCacheProvider>
          <CssBaseline />
          {children}
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

Add any @mui/material component to the app/page.tsx file. I tried Box and Typography.

import Image from "next/image";
import styles from "./page.module.css";
import { Box, Typography } from "@mui/material";

export default function Home() {
  return (
    <main className={styles.main}>
      <Typography>Hello!</Typography>
    </main>
  );
}

Run the project: npm run dev
You will see the following error:

Note: Somehow it works when I remove all @mui/material-ui components from the layout (CSSBaseline in the above example) - but it should be allowed and normal to have mui components in the root layout.

Current behavior 😯

The error:

Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.

Your environment 🌎

npx @mui/envinfo

System:
    OS: macOS 14.1.2
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.18.0/bin/yarn
    npm: 10.2.5 - ~/Repos/material-ui-next-14-0-4/node_modules/.bin/npm
  Browsers:
    Chrome: 120.0.6099.109
    Edge: Not Found
    Safari: 17.1.2
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @mui/base:  5.0.0-beta.27
    @mui/core-downloads-tracker:  5.15.0
    @mui/material: ^5.15.0 => 5.15.0
    @mui/material-nextjs: ^5.15.0 => 5.15.0
    @mui/private-theming:  5.15.0
    @mui/styled-engine:  5.15.0
    @mui/system:  5.15.0
    @mui/types:  7.2.11
    @mui/utils:  5.15.0
    @types/react: ^18 => 18.2.45
    react: ^18 => 18.2.0
    react-dom: ^18 => 18.2.0
    typescript: ^5 => 5.3.3

The text was updated successfully, but these errors were encountered:

ceefour · 2023-12-17T16:19:32Z

I get this error too for SSR pages, from the components like Stack and Typography.

ceefour · 2023-12-17T16:25:08Z

@dus4nstojanovic what is the latest (previous) version that does not have this bug?

dus4nstojanovic · 2023-12-17T16:27:54Z

@ceefour The previous one worked just fine for me - 14.0.3

ceefour · 2023-12-17T16:55:48Z

Confirmed it is also working with Nextjs 13.x SSR pages.

ceefour · 2023-12-17T16:59:00Z

@dus4nstojanovic Thanks, confirmed that it works with Nextjs 14.0.3 but crashed with 14.0.4 (SSR pages only).

LassazVegaz · 2023-12-18T01:39:55Z

I am experiencing the same. Worked with 13.x. After upgrading to 14.x yesterday, it broke.

LassazVegaz · 2023-12-18T04:10:23Z

In my case, CssBaseline does not give an error. Any MUI component added to the layout file works fine. I have an AppBar there. What does not work is SSR pages. When I remove MUI components from the page, the page with the components in the layout is displayed.

I want this issue to be fixed really fast and I am ready to contribute. I cannot run the website without this fixed. It will take much longer to switch to another UI framework or library.

joshke · 2023-12-18T07:57:14Z

+1
Everything is working on 14.0.3, after upgrade to 14.0.4

Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.

AnimeManna · 2023-12-18T15:41:29Z

Had this issue today. My way to fix it in root layout JS is added new component like MainLayout and give him "use client" prop

"use` client";

import { CssBaseline } from "@mui/material";
import React, { PropsWithChildren } from "react";

export const MainLayout: React.FC<PropsWithChildren> = ({ children }) => (
  <React.Fragment>
    <CssBaseline />
    {children}
  </React.Fragment>
);

and dirrectly wrap all in root layout like this


import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
import { MainLayout } from "@/layouts/main";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Next.JS - app",
  description:
    "Next.js app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AppRouterCacheProvider>
          <MainLayout>{children}</MainLayout>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

LassazVegaz · 2023-12-19T04:13:42Z

+1 Everything is working on 14.0.3

This works. Thanks

francoisjacques · 2023-12-19T05:46:32Z

@AnimeManna your snippet refers to v13. Can you confirm you are running with nextjs v14.0.4 or v14.0.5-canary?

Personally, the proposed workaround did not work with v14.0.4 (or .5-canary-latest), only going back to v14.0.3 did. I believe the issue is upstream with react-dom maybe?

AnimeManna · 2023-12-19T09:40:25Z

@francoisjacques , yep I'm pretty sure, here is my package.json:

{
  "name": "my-portfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.15.0",
    "@mui/material-nextjs": "^5.15.0",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "typescript": "^5"
  }
}

I've created this project yesterday, so I have the newest packages

seandawn · 2023-12-19T10:28:42Z

I'm also getting this error

"@mui/material": "^5.15.0",
"next": "^14.0.4",

SSR pages no longer work "Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function."

Dareeman · 2023-12-21T12:54:17Z

I also encountered a problem.

"next": "^14.0.4",
"@mui/material": "^5.15.1"

For now, here's what helped me get around the problem.
Added /index.

Example:
import { Box, Card } from '@mui/material/index'

ptpittman · 2023-12-21T13:54:24Z

Same error here on a site that's almost entirely server side app router – @Dareeman's workaround didn't work for me. @AnimeManna's might, but only by dropping everything inside root layout out into client space. For the moment, keeping things at 14.0.3, they're working fine.

leonoheart · 2023-12-22T04:58:01Z

@dus4nstojanovic
I encountered the same issue.
Now I think i have fixed the issue by replacing all @mui/material with @mui/system when importing Box component from MUI and keep other import path from MUI as it is in my project(maybe Grid/Stack/Divider are the same with Box but i have not tested on them).
It seems that Box from @mui/material dynamically import some style but @mui/system not.

import { Box } from '@mui/material'; 
↓
import { Box } from '@mui/system';

dus4nstojanovic · 2023-12-22T10:14:03Z

@leonoheart Thank you for a workaround.

But doing this in a big application, and checking every material-ui component is certainly not the solution. Plus, the material-ui recommends importing everything from @mui/material (including the Box component: link). I also believe having some components imported from @mui/material and some from @mui/system is not good for tree shaking, too.

Since the imports are in the game, possible the next.js automatic optimizePackageImports feature caused the problem. But this is only my guess.

Let's see what the maintainer says.

aasmal97 · 2023-12-22T22:06:16Z

Encountered this issue today. As @leonoheart mentioned, this is probably due to MUI dynamically importing certain styles or components.

I found that using the modularizeImports option, also unfortunately RESULTS in the same error.

const nextConfig = {
    modularizeImports: {
      "@mui/material": {
        transform: "@mui/material/{{member}}",
      },
  }
}

Workaround

This may be somewhat tedious, but the following works for a good deal of MUI components. The benefit, is that this maintains tree-shaking optimizations.

Change:

import {Container, Typography} from '@mui/material'

To:

import Container from "@mui/material/Container";
import Typography from "@mui/material/Typography";

If this can be done automatically, prior to the build or development step, without using next.js's modularizeImports option, this could be automated for a large project.

Suggestions:

Looking into the source code for the following library can yield some results (for large projects).
Configuring babel with next js, and writing a ruleset to convert the imports. Look at an example here (unfortunately, only useful if you aren't using app router)

LassazVegaz · 2023-12-23T02:22:23Z

Here are the changes made in Next14.0.4. There is a lot of stuff but we don't encounter them very frequently. Be aware of those changes and try to switch to 14.0.3.

I do not recommend making something like layout a client component just to fix this issue. Plus if the project uses MUI then MUI components are used almost everywhere. So you will end up making every server side component a client component. Not a good way to leverage the benefits of NextJS.
Changing import paths in a large project is nearly impossible. Plus this will be fixed soon. Then you will have to change them back to normal imports. If you are just starting a project, it will be fine.

I recently downgraded a considerably large project from 14.0.4 to 14.0.3. But still did not encounter an issue due to the downgrade. I recommend that way.

tombryden · 2023-12-23T12:17:35Z

It is worth noting that although downgrading to 14.0.3 fixes the problem, it also breaks tree shaking when using server components which causes large bundle sizes (and therefore isn't viable for many). 14.0.4 seems to fix this problem which I can see by not using <CssBasline /> or AppRouterCacheProvider causing the Element type is invalid error not to occur.

For more info I raised a bug a few weeks ago: #39814

pebcakerror · 2023-12-24T08:38:58Z

Using the official "MUI Next.js App Router" example project with Nextjs 14.0.4 works just fine.

It appears to have a custom EmotionCache instead of the AppRouterCacheProvider, though they files are nearly identical so I don't understand why EmotionCache works while AppRouterCacheProvider doesn't.

LassazVegaz · 2023-12-24T13:26:16Z

Using the official "MUI Next.js App Router" example project with Nextjs 14.0.4 works just fine.

I wonder why they have imported everything from the third path in that example project. In their documentation, they have mentioned,

Tree-shaking Material UI works out of the box in modern frameworks. Material UI exposes its full API on the top-level @mui imports. If you're using ES6 modules and a bundler that supports tree-shaking (webpack >= 2.x, parcel with a flag) you can safely use named imports and still get an optimized bundle size automatically:
import { Button, TextField } from '@mui/material';

mnajdova · 2023-12-26T10:19:11Z

Has anyone created an issue on next.js's repo? If not, that would be the first step. Seems like the change happens with the latest next.js version. Before diving deeper, would be great to confirm it is not something on their end, or get some clarification about what needs to be changed. Strangely, this broke in a patch version.

InsidersByte · 2023-12-26T10:46:42Z

There is this issue vercel/next.js#59804 that's already been raised

mnajdova · 2023-12-27T14:29:22Z

Thanks for linking the issue @InsidersByte, let's wait to see if there will be any response.

Bikramghimire · 2023-12-30T11:22:02Z

I'm also getting this error

"@mui/material": "^5.15.0", "next": "^14.0.4",

SSR pages no longer work "Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function."

I am also facing same error.

Riddhiman007 · 2024-01-06T04:32:27Z

Had this issue today. My way to fix it in root layout JS is added new component like MainLayout and give him "use client" prop

"use` client";

import { CssBaseline } from "@mui/material";
import React, { PropsWithChildren } from "react";

export const MainLayout: React.FC<PropsWithChildren> = ({ children }) => (
  <React.Fragment>
    <CssBaseline />
    {children}
  </React.Fragment>
);

and dirrectly wrap all in root layout like this


import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
import { MainLayout } from "@/layouts/main";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Next.JS - app",
  description:
    "Next.js app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AppRouterCacheProvider>
          <MainLayout>{children}</MainLayout>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

Then all components will be client components where mui works as both server and client components.
Box, Container, Typography and other components without event listener will work in server component.
Client components will affect performance. So can you give any other solution or wait for this bug to be fixed in 14.0.5?

fabiolnm · 2024-01-08T19:12:18Z

This workaround fixed the problem for me:

Error

import { Button } from '@mui/material'

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

Solution

import Button from '@mui/material/Button'

fabiolnm · 2024-01-08T20:48:45Z

Although this workaround fixes the errors in the client side, I just noticed some error logs after app starts, these errors happen in 14.0.4 only. I had to downgrade to Next 14.0.3 to avoid them.

npm run dev
Debugger attached.

> example@0.0.1 dev
> next dev

Debugger attached.
   ▲ Next.js 14.0.4
   - Local:        http://localhost:3000
   - Environments: .env

Waiting for the debugger to disconnect...
 ✓ Ready in 3.3s
 ○ Compiling /[alias] ...
 ✓ Compiled /[alias] in 4.1s (2007 modules)

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

Ashkan2003 · 2024-01-14T14:49:20Z

i faced two issues.first the initail render of page fails to an error and the second one the material ui confilict issue. i downgrade the nextjs v from 14.0.4 to 14.0.3. and this fixed all the issues

williamli · 2024-01-17T14:42:22Z

Just writing to inform everyone that this issue has been fixed in the latest Next.js canary release v14.0.5-canary.62 .

aliburzhi · 2024-01-18T20:03:58Z

Hi, thank you for the update!
are there any guesses about the release date of this patch?

williamli · 2024-01-19T09:19:05Z

@aliburzhi and Next v14.1 has just been released (including the patch)

aliburzhi · 2024-01-23T09:02:13Z

@williamli thank you!
good news :)

siriwatknp · 2024-02-13T08:05:31Z

@aliburzhi and Next v14.1 has just been released (including the patch)

Thanks for the update @williamli. I'm closing this issue.

omerman · 2024-03-01T08:03:08Z

@williamli Hey, I think there is a very similar issue with 14.1.1-canary.82 (believe it starts sooner).
I see problem ONLY at build time and for SSG pages.

I have a fully working project on 14.1.1-canary.27, and if upgrading to 14.1.1-canary.87 getting very similar errors.

FYI - when setting this in my home page, the one that generates the error, the build passes just fine.
export const dynamic = 'force-dynamic';

Also FYI - due to some user custom logic in layout, I have a RSC with suspense and code that uses cookies, so technically all pages are dynamic(not using ppr). Which could mean there was a bug introduced somewhere in the area that decides if a page is considered fully static or not.

Lastly, it would seem it happens only on pages that do not use slugs.

Full logs if it helps:

[01.03.2024 09:52.10.299] [LOG]      ▲ Next.js 14.1.1-canary.82
[01.03.2024 09:52.10.299] [LOG]      - Environments: .env
[01.03.2024 09:52.10.299] [LOG]   
[01.03.2024 09:52.10.345] [LOG]      Creating an optimized production build ...
[01.03.2024 09:52.28.383] [LOG]    ✓ Compiled successfully
[01.03.2024 09:52.28.384] [LOG]      Linting and checking validity of types ...
[01.03.2024 09:52.30.274] [LOG]      Collecting page data ...
[01.03.2024 09:52.30.645] [LOG]      Generating static pages (0/6) ...
[01.03.2024 09:52.30.957] [LOG]      Generating static pages (1/6) 
[01.03.2024 09:52.31.153] [LOG]      Generating static pages (2/6) 
[01.03.2024 09:52.31.153] [LOG]      Generating static pages (4/6) 
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/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61606)
    at nM (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61553)
    at nL (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64553)
    at nB (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67545)
    at nF (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66687)
    at nL (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64860)
    at nB (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67545)
    at nM (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58567)
    at nL (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64553)
    at nL (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64832)
    at nG (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:71979)
    at Timeout._onTimeout (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:44367)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '1247676256'
}
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/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61606)
    at nM (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61553)
    at nL (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64553)
    at nB (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67545)
    at nF (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66687)
    at nL (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64860)
    at nB (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67545)
    at nM (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58567)
    at nL (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64553)
    at nL (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64832)
    at nG (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:71979)
    at Timeout._onTimeout (/Users/***/dev/store/node_modules/.pnpm/next@14.1.1-canary.82_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:44367)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)
[01.03.2024 09:52.31.653] [LOG]    ✓ Generating static pages (6/6) 
[01.03.2024 09:52.31.660] [ERROR] 
[01.03.2024 09:52.31.660] [ERROR] > Export encountered errors on following paths:
        /(home)/page: /
Error occurred while trying to run the build command
1

 ————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Ran target build for project teachers-index and 1 task(s) they depend on (22s)
 
    ✖    1/2 failed
    ✔    1/2 succeeded [0 read from cache]

Thinkscape · 2024-04-12T04:18:50Z

It's broken again with next@14.2.0

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

benjaminbours · 2024-04-13T00:08:32Z

It's broken again with next@14.2.0

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

True and I just lost one hour trying to debug this in a github action. My fix was to force nextjs version to 14.1 specificaly in package.json

pjanickovic-ph · 2024-04-13T06:40:57Z

same here after upgrading to 14.2.1, using MUI

anuraags · 2024-04-15T01:08:31Z

Same for me. Had to downgrade to 14.1

yiqu · 2024-04-15T01:24:59Z

Confirmed broke again on 14.2.1

Thinkscape · 2024-04-15T04:10:11Z

Please follow vercel/next.js#64369

The fix that has made it next.js master: vercel/next.js#64467
The likely cause (trigger) from MUI: #40663

akarray · 2024-04-23T21:30:41Z

We get the same error again in nextJS 14.2.2
Any idea about mui 6 stable release date ?

dus4nstojanovic added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 15, 2023

zannager added the package: material-ui Specific to @mui/material label Dec 15, 2023

zannager assigned mnajdova Dec 15, 2023

samuelsycamore added the nextjs label Dec 15, 2023

mnajdova added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 26, 2023

github-actions bot removed the status: waiting for author Issue with insufficient information label Dec 26, 2023

github-actions bot added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 26, 2023

mnajdova added external dependency Blocked by external dependency, we can’t do anything about it and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 27, 2023

yc-w-cn mentioned this issue Jan 10, 2024

在 layout 中使用 config provider，并且页面中有 server component 用了 antd 就会报错 ant-design/nextjs-registry#1

Open

Gr33nLight mentioned this issue Jan 24, 2024

Error rendering page with NextJS (14.0.3, 14.0.4 and 14.1.0) mikecousins/react-pdf-js#430

Open

siriwatknp closed this as completed Feb 13, 2024

siriwatknp mentioned this issue Feb 13, 2024

[material-ui] Next.js compatibility #41063

Closed

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

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

Comments

dus4nstojanovic commented Dec 15, 2023 • edited

Duplicates

Latest version

Steps to reproduce 🕹

Current behavior 😯

Your environment 🌎

ceefour commented Dec 17, 2023 • edited

ceefour commented Dec 17, 2023

dus4nstojanovic commented Dec 17, 2023

ceefour commented Dec 17, 2023 • edited

ceefour commented Dec 17, 2023 • edited

LassazVegaz commented Dec 18, 2023 • edited

LassazVegaz commented Dec 18, 2023

joshke commented Dec 18, 2023

AnimeManna commented Dec 18, 2023 • edited

LassazVegaz commented Dec 19, 2023

francoisjacques commented Dec 19, 2023 • edited

AnimeManna commented Dec 19, 2023 • edited

seandawn commented Dec 19, 2023

Dareeman commented Dec 21, 2023 • edited

ptpittman commented Dec 21, 2023

leonoheart commented Dec 22, 2023 • edited

dus4nstojanovic commented Dec 22, 2023

aasmal97 commented Dec 22, 2023 • edited

Workaround

Suggestions:

LassazVegaz commented Dec 23, 2023

tombryden commented Dec 23, 2023 • edited

pebcakerror commented Dec 24, 2023 • edited

LassazVegaz commented Dec 24, 2023

mnajdova commented Dec 26, 2023

InsidersByte commented Dec 26, 2023

mnajdova commented Dec 27, 2023

Bikramghimire commented Dec 30, 2023

Riddhiman007 commented Jan 6, 2024

fabiolnm commented Jan 8, 2024

Error

Solution

fabiolnm commented Jan 8, 2024

Ashkan2003 commented Jan 14, 2024

williamli commented Jan 17, 2024

aliburzhi commented Jan 18, 2024

williamli commented Jan 19, 2024 • edited

aliburzhi commented Jan 23, 2024

siriwatknp commented Feb 13, 2024

omerman commented Mar 1, 2024 • edited

Thinkscape commented Apr 12, 2024

benjaminbours commented Apr 13, 2024 • edited

pjanickovic-ph commented Apr 13, 2024

anuraags commented Apr 15, 2024

yiqu commented Apr 15, 2024

Thinkscape commented Apr 15, 2024

akarray commented Apr 23, 2024

dus4nstojanovic commented Dec 15, 2023 •

edited

ceefour commented Dec 17, 2023 •

edited

ceefour commented Dec 17, 2023 •

edited

ceefour commented Dec 17, 2023 •

edited

LassazVegaz commented Dec 18, 2023 •

edited

AnimeManna commented Dec 18, 2023 •

edited

francoisjacques commented Dec 19, 2023 •

edited

AnimeManna commented Dec 19, 2023 •

edited

Dareeman commented Dec 21, 2023 •

edited

leonoheart commented Dec 22, 2023 •

edited

aasmal97 commented Dec 22, 2023 •

edited

tombryden commented Dec 23, 2023 •

edited

pebcakerror commented Dec 24, 2023 •

edited

williamli commented Jan 19, 2024 •

edited

omerman commented Mar 1, 2024 •

edited

benjaminbours commented Apr 13, 2024 •

edited