-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
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
Comments
I get this error too for SSR pages, from the components like |
@dus4nstojanovic what is the latest (previous) version that does not have this bug? |
@ceefour The previous one worked just fine for me - |
Confirmed it is also working with Nextjs 13.x SSR pages. |
@dus4nstojanovic Thanks, confirmed that it works with Nextjs 14.0.3 but crashed with 14.0.4 (SSR pages only). |
I am experiencing the same. Worked with 13.x. After upgrading to 14.x yesterday, it broke. |
In my case, 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. |
+1 Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function. |
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
and dirrectly wrap all in root layout like this
|
This works. Thanks |
@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? |
@francoisjacques , yep I'm pretty sure, here is my package.json:
I've created this project yesterday, so I have the newest packages |
I'm also getting this error "@mui/material": "^5.15.0", 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 also encountered a problem. "next": "^14.0.4", For now, here's what helped me get around the problem. Example: |
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. |
@dus4nstojanovic
|
@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 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. |
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.
WorkaroundThis 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:
To:
If this can be done automatically, prior to the build or development step, without using next.js's Suggestions: |
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 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. |
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 For more info I raised a bug a few weeks ago: #39814 |
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 |
I wonder why they have imported everything from the third path in that example project. In their documentation, they have mentioned,
|
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. |
I am also facing same error. |
Then all components will be client components where mui works as both server and client components. |
This workaround fixed the problem for me: Error
Solution
|
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.
|
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 |
Just writing to inform everyone that this issue has been fixed in the latest Next.js canary release v14.0.5-canary.62 . |
Hi, thank you for the update! |
@aliburzhi and Next v14.1 has just been released (including the patch) |
@williamli thank you! |
Thanks for the update @williamli. I'm closing this issue. |
@williamli Hey, I think there is a very similar issue with 14.1.1-canary.82 (believe it starts sooner). 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. 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:
|
It's broken again with
|
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 |
same here after upgrading to 14.2.1, using MUI |
Same for me. Had to downgrade to 14.1 |
Confirmed broke again on 14.2.1 |
Please follow vercel/next.js#64369 The fix that has made it next.js master: vercel/next.js#64467 |
We get the same error again in nextJS 14.2.2 |
Looks like this got fixed in 14.2.3 but I'm seeing it again in 14.2.5, is anyone else? |
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
<#40214 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/A3BDXBOBOZJG4Q3YRQGF5ULZME4XTAVCNFSM6AAAAABAWVSSXSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRWHEZTONZXHA>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
I got same error in Next 14.2.5 , any solution |
Confirming occurrence of this with Next 14.2.8 and @mui/material 5.16.6. |
In my case, Next 14.2.9 gives me this error. Next 14.2.8 has no issues.
The full error:
|
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. 😔 |
Duplicates
Latest version
Steps to reproduce 🕹
I created a sample repository here.
Steps:
npx create-next-app@latest
(select theapp router
andtypescript
),npm install @mui/material @emotion/react @emotion/styled @mui/material-nextjs @emotion/cache
AppRouterCacheProvider
, as it is described here,@mui/material
component above the{children}
in the Root layout (I added the<CSSBaseline />
but also tried with anotherTypography
):@mui/material
component to theapp/page.tsx
file. I triedBox
andTypography
.npm run dev
Current behavior 😯
The error:
Your environment 🌎
npx @mui/envinfo
The text was updated successfully, but these errors were encountered: