Minified React error #31 after upgrading to Next 15

[bbergeron-xlkey]

Summary

After running npx @next/codemod@canary upgrade latest to upgrade from Next 14 to 15, I can't build my project with next build:

Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html\?invariant\=31\&args\[\]\=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Z (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:490)
    at Xc (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:409)
    at Zc (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:210)
    at Z (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
    at Zc (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:479)
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html\?invariant\=31\&args\[\]\=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Z (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:490)
    at Xc (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:409)
    at Zc (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:210)
    at Z (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
    at Zc (/home/bbergeron/Projects/XLKey/xlhub-platform/upgrade/next-15/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:479)
Export encountered an error on /_error: /404, exiting the build.

The closest things to an hint I can get from this is a mention of a "/404" page, which I do not have in my project. What should I do?

Additional information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Mon Nov 18 15:58:16 EST 2024
  Available memory (MB): 64151
  Available CPU cores: 12
Binaries:
  Node: 22.4.1
  npm: 10.8.1
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.0.4 // Latest available version is detected (15.0.4).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.7.2
Next.js Config:
  output: standalone

[icyJoseph]

I was getting this yesterday, when I tried to build someone else's project. Upgrading to next@canary fixed it for me, so I am guessing it has been fixed leading up to the next release (15.0.5)

[icyJoseph]

Mmm, any chance you could try to make a small reproduction repository? As little content as possible to trigger the issue

[bbergeron-xlkey]

Negative. It's a proprietary repository, and while exposing some of it wouldn't be an issue, I'm still encountering this error even after wiping out /src/app. I have no idea what I should export to create a reproducible issue :/

[icyJoseph]

Aha, I meant starting a fresh project and changing it until it breaks. More or less following what's going on into your production repository

Alternatively, maybe remove pages and routes until a build passes. Blunt, but works more - often than not. Then you know what code is introducing the error. If no page at all seems to do this, then it has to be a package, or configuration of the project.

[bbergeron-xlkey]

Remove pages and routes until a build passes

Yeah, that's what I did. I deleted everything in /src/app and still got the issue.

Configuration

next.config.mjs is as bare as it gets, with output: "standalone".

Packages

Now, that's a promising direction. It turns out our package-lock.json is barely holding together and was tampered with using --legacy-peer-deps at some point. Copying package.json into a new project and running npm i --include-dev produces a bunch of errors related to react@19 vs react@18. Running npm ls react confirms that the React version is inconsistent across dependencies. I'll investigate that further and report back soon.

[icyJoseph]

Aha, well, React 19 is stable now, so you might as well update other dependencies. Most projects have gone out with a v19 supported version.

[CSpy163]

My new Next.js 15 project is located in a monorepo. After moving it out and building it separately, it worked fine.

[jhohlfeld]

Try removing reactStrictMode: true from next.config.ts. I had this error as well and found NextJS was behaving weirdly in my turborepo package apps/web. (My turborepo started as a next@14 create-turbo and changed a lot since then.)

The way I tested this:

1. I ran bunx create-next-app@latest
2. I ended up with a [email protected] app that worked.
3. copied this to my turborepo and incrementally adding/replacing stuff kept working.

[jhohlfeld]

After this worked for a short while, the mentioned error occurred again. I started next with --turbo in the meantime, so this might be a contributing factor.

I then removed node_modules and lockfile and installed again. I upgraded to @vercel/[email protected] and removed --turbo from the dev script. Also, I removed bun.lockb and node_modules on each step again and again.

Right now, it's working.

[brandon-kyle-bailey]

This does not resolve the issue for me

[icyJoseph]

Just to report back, it was this repository, https://github.com/eknkc/ssr-benchmark, that when upgrading to Next 15, the root, and modules/next folder, causes this error #31 for me as well... and I haven't been able to really fix it, besides taking a canary 🤔

[icyJoseph]

Ok, keeping modules/next-pages at a different react and next.js version, seems to do the trick, albeit with some errors still...

[icyJoseph]

Could it be the swc version? 🤔

[drewlowe]

Did you find a good solution?

[drewlowe]

This comment fixes the issue: vercel/turborepo#9335 (comment)

"After performing npm install from the root folder, my nextjs application (in the apps/web-server sub-folder for me) contained its own node_modules folder which only contained react and react-dom packages. The root node_modules folder also contained the same versions. For some reason, next build seems to be confused by the dueling packages, so I simply deleted my app's node_modules folder (i.e. apps/web-server/node_modules in my case) and then re-ran the build. Voila! everything worked fine."

[rctoris]

The above worked, but its not scaleable in prod deployments, any updates?

[TheProShizerr]

I'm encountering this error again. For a while, the error didn't occur, but now it's back. I tried deleting the node_modules folder and reinstalling everything, but it didn't help. I'm using Next.js version 15.

What’s strange is that 20 commits ago, I was building the project without any issues on each commit, but now the error appears on every commit. Any ideas on what might be causing this?

[sgup]

I'm having this issue when trying to build a fresh nextjs app in a monorepo (using bun workspaces, but I tried a vanilla npm workspace as well). Downgraded to 14.2.24, which works.

[rctoris]

I downgraded as well... worked but still a major setback

[kingh0730]

For those who don't want to downgrade next or react, and don't use the pages router, and are only getting this error prerendering page "/404" and "/500", this error is coming from node_modules/next/dist/export/routes/pages.js.

Specially, here:

next.js/packages/next/src/export/routes/pages.ts

Lines 114 to 126 in b8ee3ce

	try {
	renderResult = await lazyRenderPagesPage(
	req,
	res,
	page,
	searchAndDynamicParams,
	renderOpts,
	sharedContext,
	renderContext
	)
	} catch (err) {
	if (!isBailoutToCSRError(err)) throw err
	}

So I just patched this file by commenting out the following line:

next.js/packages/next/src/export/routes/pages.ts

Line 125 in b8ee3ce

if (!isBailoutToCSRError(err)) throw err

And I get a successful build.

If you're ok with having empty "/404" and "/500" pages and don't mind potential pitfalls of having mixed React versions, you can try doing the same.