search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.47k stars 32.16k forks source link

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

Closed dus4nstojanovic closed 7 months ago

dus4nstojanovic commented 9 months ago

Duplicates

Latest version

Steps to reproduce 🕹

I created a sample repository here.

Steps:

  1. Create a new Next.js project: npx create-next-app@latest (select the app router and typescript),
  2. Install Material-UI: npm install @mui/material @emotion/react @emotion/styled @mui/material-nextjs @emotion/cache
  3. Wrap the children in the root layout with the AppRouterCacheProvider, as it is described here,
  4. 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>
  );
}
  1. 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>
  );
}
  1. Run the project: npm run dev
  2. You will see the following error:
image

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 ```
ceefour commented 9 months ago

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

ceefour commented 9 months ago

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

dus4nstojanovic commented 9 months ago

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

ceefour commented 9 months ago

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

ceefour commented 9 months ago

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

LassazVegaz commented 9 months ago

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

LassazVegaz commented 9 months ago

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 commented 9 months ago

+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 commented 9 months ago

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 commented 9 months ago

+1 Everything is working on 14.0.3

This works. Thanks

francoisjacques commented 9 months ago

@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 commented 9 months ago

@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 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

@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 commented 9 months ago

@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 commented 9 months ago

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:

  1. Looking into the source code for the following library can yield some results (for large projects).

  2. 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 commented 9 months ago

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 commented 9 months ago

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: https://github.com/mui/material-ui/issues/39814

pebcakerror commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

There is this issue https://github.com/vercel/next.js/issues/59804 that's already been raised

mnajdova commented 9 months ago

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

Bikramghimire commented 9 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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

aliburzhi commented 8 months ago

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

williamli commented 8 months ago

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

aliburzhi commented 8 months ago

@williamli thank you! good news :)

siriwatknp commented 7 months ago

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

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

omerman commented 7 months ago

@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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

same here after upgrading to 14.2.1, using MUI

anuraags commented 5 months ago

Same for me. Had to downgrade to 14.1

yiqu commented 5 months ago

Confirmed broke again on 14.2.1

Thinkscape commented 5 months ago

Please follow https://github.com/vercel/next.js/issues/64369

The fix that has made it next.js master: https://github.com/vercel/next.js/pull/64467 The likely cause (trigger) from MUI: https://github.com/mui/material-ui/pull/40663

akarray commented 5 months ago

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

james-pierian commented 2 months ago

Looks like this got fixed in 14.2.3 but I'm seeing it again in 14.2.5, is anyone else?

pjanickovic-ph commented 2 months ago

Agreed.its there

On Sat, Jul 13, 2024, 16:47 james-pierian @.***> wrote:

Looks like this got fixed in 14.2.3 but I'm seeing it again in 14.2.5, is anyone else?

— Reply to this email directly, view it on GitHub https://github.com/mui/material-ui/issues/40214#issuecomment-2226937778, or unsubscribe https://github.com/notifications/unsubscribe-auth/A3BDXBOBOZJG4Q3YRQGF5ULZME4XTAVCNFSM6AAAAABAWVSSXSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRWHEZTONZXHA . You are receiving this because you commented.Message ID: @.***>

Muhammed9955 commented 1 month ago

Looks like this got fixed in 14.2.3 but I'm seeing it again in 14.2.5, is anyone else?

I got same error in Next 14.2.5 , any solution

mifrej commented 3 weeks ago

Confirming occurrence of this with Next 14.2.8 and @mui/material 5.16.6. Important is that in my case the error happens when MUI component (with Box component) is imported from monorepo shared library into Nextjs Layout.tsx.

Onurfesci commented 2 weeks ago

In my case, Next 14.2.9 gives me this error. Next 14.2.8 has no issues. Update: Can't build / dev in 14.2.11 Deps:

    "@mui/base": "5.0.0-beta.40",
    "@mui/joy": "5.0.0-beta.48",
    "@mui/system": "^6.0.2",

The full error:

 ⨯ 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.
    at aw (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46775)
    at aw (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46505)
    at a_ (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at aw (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:45321)
    at a_ (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at ab (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:11808)
    at /Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16871
    at aw (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16908)
    at a_ (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at ab (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:11808)
    at /Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16871
    at aw (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16908)
    at a_ (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at ab (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:11808)
    at /Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16871
    at aw (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16908)
    at aw (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46505)
    at a_ (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at aj (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:53793)
    at aC (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:52874)
    at a_ (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50095)
    at aj (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:53793)
    at /Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:42336
    at aw (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:42822)
    at a_ (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at aj (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:53793)
    at aC (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:52874)
    at a_ (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50095)
    at aj (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:53793)
    at /Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:42336
    at aw (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:42822)
    at a_ (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at a_ (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50067)
    at /Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:58612
    at /Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:59270
    at aN (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:59278)
    at Timeout._onTimeout (/Users/onur/repos/webapp-customer-react/apps/webapp-customer/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:6939)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)
digest: "3739485798"