Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
dus4nstojanovic opened this issue Dec 15, 2023 · 52 comments
Assignees
Labels
external dependency Blocked by external dependency, we can’t do anything about it nextjs package: material-ui Specific to @mui/material

Comments

@dus4nstojanovic
Copy link

dus4nstojanovic commented Dec 15, 2023

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:

  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
@dus4nstojanovic dus4nstojanovic added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 15, 2023
@zannager zannager added the package: material-ui Specific to @mui/material label Dec 15, 2023
@ceefour
Copy link

ceefour commented Dec 17, 2023

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

@ceefour
Copy link

ceefour commented Dec 17, 2023

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

@dus4nstojanovic
Copy link
Author

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

@ceefour
Copy link

ceefour commented Dec 17, 2023

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

@ceefour
Copy link

ceefour commented Dec 17, 2023

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

@LassazVegaz
Copy link

LassazVegaz commented Dec 18, 2023

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

@LassazVegaz
Copy link

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
Copy link

joshke commented Dec 18, 2023

+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
Copy link

AnimeManna commented Dec 18, 2023

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
Copy link

+1 Everything is working on 14.0.3

This works. Thanks

@francoisjacques
Copy link

francoisjacques commented Dec 19, 2023

@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
Copy link

AnimeManna commented Dec 19, 2023

@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
Copy link

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
Copy link

Dareeman commented Dec 21, 2023

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
Copy link

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
Copy link

leonoheart commented Dec 22, 2023

@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
Copy link
Author

@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
Copy link

aasmal97 commented Dec 22, 2023

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
Copy link

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
Copy link

tombryden commented Dec 23, 2023

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
Copy link

pebcakerror commented Dec 24, 2023

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
Copy link

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
Copy link
Member

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.

@mnajdova 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 github-actions bot removed the status: waiting for author Issue with insufficient information label Dec 26, 2023
@Ashkan2003
Copy link

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
Copy link

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

@aliburzhi
Copy link

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

@williamli
Copy link

williamli commented Jan 19, 2024

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

@aliburzhi
Copy link

@williamli thank you!
good news :)

@siriwatknp
Copy link
Member

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

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

@omerman
Copy link

omerman commented Mar 1, 2024

@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
Copy link

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
Copy link

benjaminbours commented Apr 13, 2024

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
Copy link

same here after upgrading to 14.2.1, using MUI

@anuraags
Copy link

Same for me. Had to downgrade to 14.1

@yiqu
Copy link

yiqu commented Apr 15, 2024

Confirmed broke again on 14.2.1

@Thinkscape
Copy link

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
Copy link

akarray commented Apr 23, 2024

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

@james-pierian
Copy link

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

@pjanickovic-ph
Copy link

pjanickovic-ph commented Jul 13, 2024 via email

@Muhammed9955
Copy link

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
Copy link

mifrej commented Sep 6, 2024

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
Copy link

Onurfesci commented Sep 10, 2024

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"

@mclenithan
Copy link

mclenithan commented Oct 21, 2024

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"

Same issue here with the version change. Still cannot build in version 14.2.15. Did you find a solution @Onurfesci ?

@Onurfesci
Copy link

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"

Same issue here with the version change. Still cannot build in version 14.2.15. Did you find a solution @Onurfesci ?

@mclenithan unfortunately not, haven't been able to pinpoint or solve the issue. Also can't build with the latest version either. 😔

@mnajdova mnajdova assigned siriwatknp and unassigned mnajdova Nov 25, 2024
@mnajdova mnajdova reopened this Nov 25, 2024
@mclenithan
Copy link

@Onurfesci I was able to fix. Such a silly find:
Check your next.config.js
Do you have "serverComponentsExternalPackages:" described? If so, this is deprecated, not needed, and breaks the build process. This fixed it for me.

@Onurfesci
Copy link

Hi @mclenithan, I'm glad you were able to fix!
I don't use serverComponentsExternalPackages anywhere in my code, so it must be something else on my end. However, in my case, upgrading to next 15 unblocks the build, so maybe the bug was fixed in somewhere along the way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
external dependency Blocked by external dependency, we can’t do anything about it nextjs package: material-ui Specific to @mui/material
Projects
None yet
Development

No branches or pull requests