Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix [Bug] Next.js 15.5.3 + React 19 RC - Build fails with React error #31 during static generation [1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#84283•Fetched 2026-04-08 02:20:05
View on GitHub
Comments
1
Participants
2
Timeline
4
Reactions
0
Author
maclavijomaclavijo
Participants
github-actions[bot]github-actions[bot]maclavijomaclavijo
Timeline (top)
closed ×1commented ×1labeled ×1locked ×1

Production build fails during static generation of error pages (404, 500) with React error #31: "Objects are not valid as a React child". The application works perfectly in development mode and at runtime, but npm run build fails consistently during the static generation phase.

Error Message

[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.]
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
Export encountered an error on /_error: /404, exiting the build.

Root Cause

This appears to be a fundamental incompatibility between React 19 RC and Next.js 15's static generation process. The error occurs during the serialization phase when Next.js attempts to statically generate pages, suggesting React 19 RC has breaking changes in how it handles object serialization during SSR/SSG.

Fix Action

Fix / Workaround

Workarounds That DO Work

4. Downgrade to React 18

npm install react@18 react-dom@18 @types/react@18 @types/react-dom@18

This should resolve the issue but may break other React 19 features if you're using them.

Code Example

[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.]
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
Export encountered an error on /_error: /404, exiting the build.

---

npx create-next-app@latest my-app
cd my-app
npm install react@rc react-dom@rc

---

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Test App',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

---

npm run build

---

export const dynamic = 'force-dynamic'

---

<Suspense fallback={<div>Loading...</div>}>
  {children}
</Suspense>

---

const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])
if (!mounted) return null

---

// next.config.js
{
  output: 'standalone',
  experimental: {
    serverComponentsExternalPackages: ['@clerk/nextjs'],
  }
}

---

// pages/404.js, pages/500.js
export default function Custom404() {
  return <h1>404</h1>
}

---

webpack: (config, { isServer }) => {
  if (!isServer) {
    config.resolve.fallback = { fs: false }
  }
  return config
}

---

npm run dev

---

npm run build || true
node .next/standalone/server.js

---

npm install react@18 react-dom@18 @types/react@18 @types/react-dom@18

---

{
  "next": "15.5.3",
  "react": "19.0.0",
  "react-dom": "19.0.0",
  "node": "20.x",
  "platform": "linux"
}

---

{
  "dependencies": {
    "next": "^15.5.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@types/react": "^19.0.2",
    "@types/react-dom": "^19.0.2",
    "typescript": "^5.9.2"
  }
}
RAW_BUFFERClick to expand / collapse

[BUG] Next.js 15.5.3 + React 19.0.0 RC - Build fails with "React error #31" during static generation

Description

Production build fails during static generation of error pages (404, 500) with React error #31: "Objects are not valid as a React child". The application works perfectly in development mode and at runtime, but npm run build fails consistently during the static generation phase.

Environment

  • Next.js: 15.5.3
  • React: 19.0.0 (RC)
  • React-DOM: 19.0.0 (RC)
  • Node: 20.x
  • OS: Linux 5.15.0-151-generic
  • Package Manager: npm
  • Deployment Target: Standalone output

Error Message

[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.]
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
Export encountered an error on /_error: /404, exiting the build.

Minimal Reproduction

  1. Create a new Next.js 15 app with React 19 RC:
npx create-next-app@latest my-app
cd my-app
npm install react@rc react-dom@rc
  1. Create a basic layout with any client component:
// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Test App',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
  1. Run build:
npm run build

Expected Behavior

Build should complete successfully and generate static pages.

Actual Behavior

Build fails during static generation with React error #31, specifically when trying to prerender error pages (404, 500).

Investigation & Findings

The Issue is NOT Related To:

  1. Authentication Providers (Clerk, NextAuth, etc.)

    • Error persists even with NO authentication provider
    • Removed all ClerkProvider components - still fails

  2. Error Boundary Components

    • Deleted all custom error.tsx, not-found.tsx, global-error.tsx files
    • Error still occurs with Next.js default error pages

  3. Font Loading

    • Removed next/font/google Inter font
    • Error persists without any font imports

  4. CSS/Styling

    • Removed all CSS imports including globals.css
    • Error persists with no styles

  5. Client Components

    • Made everything server components
    • Error still occurs

Root Cause

This appears to be a fundamental incompatibility between React 19 RC and Next.js 15's static generation process. The error occurs during the serialization phase when Next.js attempts to statically generate pages, suggesting React 19 RC has breaking changes in how it handles object serialization during SSR/SSG.

Attempted Solutions (All Failed)

1. Dynamic Rendering Configuration

export const dynamic = 'force-dynamic'

Result: No effect, error persists

2. Suspense Boundaries

<Suspense fallback={<div>Loading...</div>}>
  {children}
</Suspense>

Result: No effect, error persists

3. Conditional Client-Side Rendering

const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])
if (!mounted) return null

Result: No effect during build phase

4. Next.js Configuration Changes

// next.config.js
{
  output: 'standalone',
  experimental: {
    serverComponentsExternalPackages: ['@clerk/nextjs'],
  }
}

Result: No effect, error persists

5. Custom Error Pages with Dynamic Imports

// pages/404.js, pages/500.js
export default function Custom404() {
  return <h1>404</h1>
}

Result: Error still occurs

6. Webpack Configuration

webpack: (config, { isServer }) => {
  if (!isServer) {
    config.resolve.fallback = { fs: false }
  }
  return config
}

Result: No effect

Workarounds That DO Work

1. Deploy to Vercel/Netlify

These platforms handle the SSG issue in their build infrastructure automatically.

2. Use Development Mode

npm run dev

Everything works perfectly in development mode.

3. Use Standalone Build Despite Error

npm run build || true
node .next/standalone/server.js

The build fails but still creates a working standalone output.

4. Downgrade to React 18

npm install react@18 react-dom@18 @types/react@18 @types/react-dom@18

This should resolve the issue but may break other React 19 features if you're using them.

Impact

  • Development: No impact, works perfectly
  • CI/CD: Builds fail, breaking automated deployments
  • Production Runtime: No impact once deployed (app works fine)
  • Developer Experience: Confusing error that appears to be auth-related but isn't

Related Issues

  • This may be related to React 19 RC's changes to SSR/SSG serialization
  • Similar issues might exist in other Next.js + React 19 RC projects
  • Not specific to any authentication library (Clerk, Auth.js, etc.)

Suggested Fix

  1. Next.js should handle React 19 RC's serialization changes during SSG
  2. Or provide clear documentation about React 19 RC incompatibility
  3. Or provide a configuration option to bypass SSG for error pages

Additional Context

  • The error is misleading as it suggests an issue with rendering objects as React children
  • Many developers will waste time debugging authentication providers when that's not the issue
  • The app is fully functional despite the build error
  • This affects any Next.js 15 project using React 19 RC

System Information

{
  "next": "15.5.3",
  "react": "19.0.0",
  "react-dom": "19.0.0",
  "node": "20.x",
  "platform": "linux"
}

Package.json Dependencies

{
  "dependencies": {
    "next": "^15.5.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@types/react": "^19.0.2",
    "@types/react-dom": "^19.0.2",
    "typescript": "^5.9.2"
  }
}

Note: This issue is NOT related to Clerk, NextAuth, or any other authentication library. It's a core incompatibility between React 19 RC and Next.js 15's static generation process.

extent analysis

TL;DR

Downgrade to React 18 to resolve the build issue caused by incompatibility between React 19 RC and Next.js 15's static generation process.

Guidance

  1. Verify the issue: Confirm that the error occurs during static generation and not in development mode.
  2. Check React version: Ensure that the issue is related to React 19 RC and not another version.
  3. Try workarounds: Consider deploying to Vercel or Netlify, or using development mode as temporary solutions.
  4. Downgrade React: Run npm install react@18 react-dom@18 @types/react@18 @types/react-dom@18 to downgrade to React 18.

Example

No code snippet is provided as the issue is related to version incompatibility rather than code syntax.

Notes

This solution may break other React 19 features if they are being used. It's essential to weigh the trade-offs before downgrading.

Recommendation

Apply the workaround by downgrading to React 18, as it is the most straightforward solution to resolve the build issue.

FAIL-SAFE: If the issue persists after downgrading, re-evaluate the environment and dependencies to ensure that all components are compatible with the downgraded React version.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#ssr#latency issue#model loading#dependency error#configuration error

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING