next.js: Random non-deterministic React hydration error 418 using appDir that only happens on prod Vercel

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64
Binaries:
  Node: 16.18.0
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: 7.15.0
Relevant packages:
  next: 13.0.5-canary.2
  eslint-config-next: 13.0.4
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

I have been driving myself insane for the past few days trying to debug this problem.

I am experiencing very occasional React hydration errors (418) that only repro on production Vercel, making the root cause extremely difficult to pinpoint. They do not repro during next dev with/without react strict mode, and I have been unable to repro with a local next build + next start.

Note: this is using Next.js 13 appDir.

I have a feeling this is a race condition somewhere, either in Next.js or React 18 because it happens only occasionally in production, and the rest of the time the exact same pages load fine.

I have read all of the associated threads & discussions surrounding hydration errors… I’m not using any date strings, have double checked DOM nesting, have disabled swcMinify, added Suspense boundaries, etc — all in an attempt to mitigate these errors but to no avail.

Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at zh (796-3c8db907cc96f9a4.js:9:55756)
    at ...

Expected Behavior

These pages should load fine 100% of the time instead of 98% of the time.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/transitive-bullshit/next-movie

To Reproduce

This branch repros consistently (vercel deployment), though it is using an untested beta of next-themes via https://github.com/pacocoursey/next-themes/issues/152, so I’m not sure if this branch is a good representative example.

The main branch repros sporadically as described above (vercel prod deployment). If you open devtools and sit there and refresh either the main page or a simpler movie detail page for a few minutes, eventually you may (or may not :sigh:) run into this hydration error.

The difficulty of reproducing the issue has been extremely frustrating for me, and given that it only happens randomly on prod, it makes things very, very difficult to debug. Honestly, I’ve never experienced this much frustration with Next.js / React before in the 5-6 years I’ve been in the ecosystem, but I can’t deploy things to Vercel as things stand if some percentage of my users will experience random errors.

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 5
Comments: 17 (4 by maintainers)

Most upvoted comments

I think we’ve got a minimal reproduction demo, https://github.com/vercel/next.js/discussions/43180, https://github.com/mastoj/next-hydration-error slow down your CPU to 4x, reload the page, and just click ~a lot~ on the page… I see the same behaviour on https://next-movie-orif67sfe-saasify.vercel.app/ - slow down CPU to x4, reload and click as soon as you can, the error comes up.

I suspect this has to do with the hydration process trying to favour responding to the UI interaction, over finishing hydration?

icyJoseph on Nov 21, 2022

I’ve faced the same issues with Page Router.

any update on this?

anwam on Aug 23, 2023

Similar Issue. Next.js 13.4.4, using appDir. Hosting production on Vercel.

When page content is already visible but the page itself is still loading clicking on any link causes a client exception - Minified React error.

Especially easy to reproduce with disabled cache or any kind of throttling.

Spamming “reload” also causes a client exception - Minified React error.

Also tested @icyJoseph’s demo, can confirm it being reproducible.

I think we’ve got a minimal reproduction demo, #43180, https://github.com/mastoj/next-hydration-error slow down your CPU to 4x, reload the page, and just click ~a lot~ on the page… I see the same behaviour on https://next-movie-orif67sfe-saasify.vercel.app/ - slow down CPU to x4, reload and click as soon as you can, the error comes up.

I suspect this has to do with the hydration process trying to favour responding to the UI interaction, over finishing hydration?

SaveliiLukash on May 30, 2023

Experiencing this exact same issue down to a T. Attempted some various A-B tests with components to see if any particular one was the source of the hydration error (obviously being on production there was no info in the error as to where it originated). The conclusion I came to, but am deeply unsatisfied with, was thus:

If we have a site structure with layout + page + child components, and the very last component in this tree is strictly set to client-side i.e. 'use client';

…then the error would occur when visiting the page on Chrome and using a combination of 6x throttling and rapid clicking. This would reproduce the hydration error 100% of the time. Now, if instead this terminal component was NOT set to client-only, and instead was a serverside-only component (or simply not specified), then the error would not occur. Flipping these two characteristics perfectly turned the error on and off.

Why this is, or if it’s a completely different issue altogether, I have absolutely zero clue.

ZOMGodzilla on Oct 3, 2023

Thanks for reporting, will investigate!

About:

Honestly, I’ve never experienced this much frustration with Next.js / React before in the 5-6 years I’ve been in the ecosystem, but I can’t deploy things to Vercel as things stand if some percentage of my users will experience random errors.

Although we understand the frustration and will work on the issue, just a note from our docs:

While you can try out the app directory, it’s currently in beta and we do not recommend using it in production. You can still use Next.js 13 with the pages directory, please refer to the stable docs if you’re using pages.

So please bear with us in the beta period, and keep the feedback coming. 🙏

balazsorban44 on Nov 21, 2022

Facing issue on 13.2.4, though I’m also running into this issue in development

kleinesNugget on Mar 27, 2023

Just commenting to mention that this bug is still present with next@13.1.1. Repro: https://react-static-tweets-r5l6elcxa-transitive-bullshit.vercel.app/

Just keep refreshing the page while clicking around on the page and you’ll hit it right away.

I’m not sure how appDir can have any production usage until this bug is fixed.

transitive-bullshit on Dec 27, 2022

@transitive-bullshit does this ring a bell?

I’ve found it by stepping through with the debugger. I ran out of time now, but I think I found how to reproduce it.

'\n    at div\n    at div\n    at body\n    at html\n    at a (https://next-movie-orif67sfe-saasify.vercel.app/_next/static/chunks/174-49c462a21a88d7c6.js:1:11951)\n    at t.ErrorBoundary (https://next-movie-orif67sfe-saasify.vercel.app/_next/static/chunks/174-49c462a21a88d7c6.js:1:11081)\n    at k (https://next-movie-orif67sfe-saasify.vercel.app/_next/static/chunks/174-49c462a21a88d7c6.js:1:4894)\n    at C\n    at E (https://next-movie-orif67sfe-saasify.vercel.app/_next/static/chunks/174-49c462a21a88d7c6.js:1:5023)'

😅 I think you can trigger the error if you slow down the CPU, x4 is enough, and tab many times, then the error comes consistently. I wonder if this is caused by a class name being applied to the top links? or because tabbing in, is some kind of UI interaction that breaks because the App switches to favour user interactions over loading content? I cannot reproduce the same on your prod site.

Most importantly, you should be able to see this when running next build && next start, could you confirm? Hopefully I haven’t found yet another issue.

icyJoseph on Nov 21, 2022