Next 15: createTheme(): RangeError: Maximum call stack size exceeded #44278
Assignees
Labels
Comments
nphmuller
added
the
status: waiting for maintainer
|
I'm facing the same issue. I'm using nextjs 15.0.2 and @mui/material 6.1.6. However, I'm getting the issue whether I'm using turbopack or not. This is the block that causes the issue: const themeConfig = {
components: {
MuiCheckbox: {
defaultProps: {
checkedIcon: <CheckboxCheckedIcon />, // this line
color: "primary",
icon: <CheckboxIcon />, // this
indeterminateIcon: <CheckboxIntermediateIcon />, // this too
},
},
}
}Here's the output with turbopack ( Here's the output without turbopack ( |
siriwatknp
added
package: utils
|
Looks like the root cause comes from |
|
Facing same issue after upgrading the nextjs version from 14 to 15, using @mui/material 6.1.6 |
|
+1 upgrading the nextjs version from 14 to 15, using @mui/material 5.15.11 ⨯ ../node_modules/@mui/joy/node_modules/@mui/utils/esm/deepmerge/deepmerge.js (10:20) @ source
⨯ RangeError: Maximum call stack size exceeded
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
digest: "1633909859"
8 | return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
9 | }
> 10 | function deepClone(source) {
| ^
11 | if (!isPlainObject(source)) {
12 | return source;
13 | } |
1 task
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Steps to reproduce
Link to live example: https://github.com/nphmuller/mui-next-15_0_2_issue
Steps:
npx create-next-app@latestExample:
npm run devFull ThemeProvider:
Current behavior
Error in console:
Expected behavior
No error in console
Context
The issue occurs in
deepmergein@mui/utils. It doesn't handle looping references, which seems to happen in the latest Next version for React component in some cases.I initially suspected this was a Next issue, but after investigating I think it's probably a MUI issue.
The main issue is that in recent versions of React and when using Next the internal _owner key of a React component can contain a value that is referencing itself. This causes an infinite loop in deepClone() which causes the error above.
See this PR for more info (vercel/next.js#71968), but basically the issue starts to occur after Next started using the
registerClientReferencefunction of React instead ofcreateClientModuleProxy. This initially only happend for turbopack in Next 15, but in Next 15.0.2 webpack was aligned with turbopack and now both builds useregisterClientReference, so the issue now always occurs when runningnext dev.I opened this issue in Next a couple days ago when I thought it was mainly a Next issue. I haven't received a response there yet, but hopefully we'll hear soon what their conclusion is: vercel/next.js#71878
The repro there contains more lower level details about how the issue occurs, but this is the gist of it:
Here's an example of the value of the _owner field (in older versions it was
null):Your environment
npx @mui/envinfoSearch keywords: createTheme RangeError Next15 Next
The text was updated successfully, but these errors were encountered: