Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix reactCompiler: true causes hydration mismatch error (#418) with SSG (output: 'export') [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#87696•Fetched 2026-04-08 02:06:31
View on GitHub
Comments
1
Participants
2
Timeline
5
Reactions
0
Author
7kaji7kaji
Participants
7kaji7kajigithub-actions[bot]github-actions[bot]
Timeline (top)
labeled ×2closed ×1commented ×1locked ×1

Error Message

Uncaught Error: Minified React error #418; visit https://react.dev/errors/418?args[]=text&args[]=

Code Example

const nextConfig: NextConfig = {
     output: "export",
     reactCompiler: true,
     // ...
   };

---

Uncaught Error: Minified React error #418; visit https://react.dev/errors/418?args[]=text&args[]=

---

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin 25.2.0

Binaries:
  Node: 25.2.1
  npm: 11.6.2

Relevant Packages:
  next: 16.1.1
  react: 19.2.3
  react-dom: 19.2.3

Next.js Config:
  output: export
  reactCompiler: true (causes error)
  reactCompiler: false/commented (works fine)
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/genda-playground/diary

To Reproduce

  1. Create a Next.js project with SSG (output: "export")
  2. Enable React Compiler in next.config.ts: 
    const nextConfig: NextConfig = {
  output: "export",
  reactCompiler: true,
  // ...
};
  3. Build the project: npm run build
  4. Serve the static output: npx serve out
  5. Open the page in browser and check the console

Current vs. Expected behavior

Current behavior: React hydration error #418 appears in the browser console on all pages:

Uncaught Error: Minified React error #418; visit https://react.dev/errors/418?args[]=text&args[]=

Expected behavior: No hydration errors should occur.

Key observations:

  • npm run dev does NOT produce the error
  • npm run build && npx serve out DOES produce the error
  • Disabling reactCompiler (commenting it out) fixes the issue
  • This project uses Tailwind CSS (not CSS-in-JS)

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin 25.2.0

Binaries:
  Node: 25.2.1
  npm: 11.6.2

Relevant Packages:
  next: 16.1.1
  react: 19.2.3
  react-dom: 19.2.3

Next.js Config:
  output: export
  reactCompiler: true (causes error)
  reactCompiler: false/commented (works fine)

Which area(s) are affected? (Select all that apply)

  • Static HTML Export (next export / output: 'export')
  • React Compiler

Which stage(s) are affected? (Select all that apply)

  • next build (local)

Additional context

This issue is different from existing React Compiler hydration issues (#65995, #75410) which are related to CSS-in-JS libraries (styled-jsx, styled-components).

This project uses Tailwind CSS (utility classes only, no CSS-in-JS), yet the hydration error still occurs with reactCompiler: true enabled in SSG mode.

The error message args[]=text&args[]= suggests a text node mismatch between server-rendered HTML and client hydration.

extent analysis

TL;DR

The most likely fix is to disable the React Compiler in next.config.ts by setting reactCompiler to false or commenting it out, as this has been observed to resolve the hydration error.

Guidance

  • Verify that the issue is indeed caused by the React Compiler by toggling the reactCompiler option in next.config.ts and checking if the error persists.
  • Investigate potential text node mismatches between server-rendered HTML and client hydration, as hinted by the error message args[]=text&args[]=.
  • Consider updating Next.js and React to the latest versions, as the issue may have been fixed in newer releases.
  • If the issue persists, try to isolate the problem by creating a minimal reproducible example (MRE) to help identify the root cause.

Example

No code snippet is provided, as the issue is more related to configuration and setup rather than a specific code problem.

Notes

The issue seems to be specific to the combination of Next.js, React Compiler, and Tailwind CSS. The fact that disabling reactCompiler resolves the issue suggests that the problem lies in the interaction between these components.

Recommendation

Apply workaround: Disable the React Compiler by setting reactCompiler to false or commenting it out in next.config.ts, as this has been observed to resolve the hydration error. This workaround is recommended because it has been verified to work in the provided example, and it allows the project to continue functioning while the root cause of the issue is further investigated.

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…
#model save/load#optimization#mixed precision#training loop#device allocation

Still need to ship something?

×6

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

Back to top recommendations

TRENDING