next.js: [NEXT-855] [AppDir] Interacting with Client Component before page fully load cause Hydration failed error.

Verify canary release

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

Provide environment information

Operating System: Platform: linux Arch: x64 Version: #1 SMP Wed Nov 23 01:01:46 UTC 2022 Binaries: Node: 16.13.0 npm: 8.1.0 Yarn: N/A pnpm: 7.25.1 Relevant packages: next: 13.1.3-canary.5 eslint-config-next: 13.1.3-canary.5 react: 18.2.0 react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

NA

To Reproduce

Create a new app: pnpm dlx create-next-app@latest --experimental-app

Create a client component:

"use client";

export function ClientComponent() {
  return (
    <button
      onClick={() => {
        console.log("clicked");
      }}
    >
      Test Client Component
    </button>
  );
}

Add it to page.tsx.

Run the app with: pnpm run dev

Reload the page and click the button component as soon as available, but before the page loaded fully load.

Describe the Bug

With pnpm run dev:

An Unhandled Runtime Error will happen.

Error: Hydration failed because the initial UI does not match what was rendered on the server.
throwOnHydrationMismatch
node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (14726:0)
tryToClaimNextHydratableInstance
node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (14776:0)
updateHostComponent
node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23001:0)
beginWork
node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24831:0)
beginWork$1
node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (32185:0)
performUnitOfWork
node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (31082:0)
workLoopSync
node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (30891:0)
renderRootSync
node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (30856:0)
performSyncWorkOnRoot
node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (30368:0)
flushSyncCallbacks
node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (14254:0)
eval
node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (29896:0)

while in the inspect window in chrome display the following errors:

The above error occurred in the <NotFoundErrorBoundary> component:

    at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:370:9)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:377:11)
    at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:289:11)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/error-boundary.js:76:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/render-from-template-context.js:12:34)
    at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:20:11)
    at body
    at html
    at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:58:9)
    at HotReload (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:19:11)
    at Router (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/app-router.js:99:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/error-boundary.js:63:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/error-boundary.js:76:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/app-router.js:20:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/app-index.js:126:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.1.3-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/app-index.js:143:11)

React will try to recreate this component tree from scratch using the error boundary you provided, ReactDevOverlay.
  | overrideMethod | @ | react_devtools_backend.js:4012
  | logCapturedError | @ | react-dom.development.js:21544
  | callback | @ | react-dom.development.js:21605
  | callCallback | @ | react-dom.development.js:17363
  | commitCallbacks | @ | react-dom.development.js:17410
  | commitClassCallbacks | @ | react-dom.development.js:26824
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:26926
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:26908
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:27078
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:27078
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:27078
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:27078
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:27078
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:26908
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:26919
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:26908
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:26908
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:26908
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:26908
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:26908
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:27078
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:27078
  | recursivelyTraverseLayoutEffects | @ | react-dom.development.js:28377
  | commitLayoutEffectOnFiber | @ | react-dom.development.js:26938
  | commitLayoutEffects | @ | react-dom.development.js:28363
  | commitRootImpl | @ | react-dom.development.js:31471
  | commitRoot | @ | react-dom.development.js:31325
  | performSyncWorkOnRoot | @ | react-dom.development.js:30401
  | flushSyncCallbacks | @ | react-dom.development.js:14254
  | eval | @ | react-dom.development.js:29891

With pnpm run build & pnpm run start:

The following error happen (which I think is the same error).

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 a7 (214-d6b33925b4f15160.js:9:55659)
    at s (214-d6b33925b4f15160.js:9:143663)
    at sh (214-d6b33925b4f15160.js:9:119001)
    at 214-d6b33925b4f15160.js:9:118828
    at sp (214-d6b33925b4f15160.js:9:118835)
    at sl (214-d6b33925b4f15160.js:9:117115)
    at aH (214-d6b33925b4f15160.js:9:53961)
    at 214-d6b33925b4f15160.js:9:114143
uu @ 214-d6b33925b4f15160.js:9
n.callback @ 214-d6b33925b4f15160.js:9
lj @ 214-d6b33925b4f15160.js:9
lU @ 214-d6b33925b4f15160.js:9
u4 @ 214-d6b33925b4f15160.js:9
(anonymous) @ 214-d6b33925b4f15160.js:9
sy @ 214-d6b33925b4f15160.js:9
sl @ 214-d6b33925b4f15160.js:9
aH @ 214-d6b33925b4f15160.js:9
(anonymous) @ 214-d6b33925b4f15160.js:9
214-d6b33925b4f15160.js:9

Uncaught 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 a7 (214-d6b33925b4f15160.js:9:55659)
    at s (214-d6b33925b4f15160.js:9:143663)
    at sh (214-d6b33925b4f15160.js:9:119001)
    at 214-d6b33925b4f15160.js:9:118828
    at sp (214-d6b33925b4f15160.js:9:118835)
    at sl (214-d6b33925b4f15160.js:9:117115)
    at aH (214-d6b33925b4f15160.js:9:53961)
    at 214-d6b33925b4f15160.js:9:114143

Expected Behavior

As soon as the client component render, I expect to be able to interact with them.

Which browser are you using? (if relevant)

Opera Gx / Google Chrome

How are you deploying your application? (if relevant)

next dev / next start

NEXT-855

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 11
  • Comments: 33 (8 by maintainers)

Most upvoted comments

a huge one honestly, because the pages become totally not functional and since this bug affects everything else, Next13 is useless because this bug

+9
nabildroid on Mar 20, 2023

Just to be clear this is already triaged and being looked at. We’re struggling to consistently reproduce the issue to investigate the root cause of the problem. Please be patient.

+8
timneutkens on Mar 20, 2023

@shuding @huozhi @leerob Could you guys fix this because it’s been there for quite a while and it’s very big problem.

+8
faradaytrs on Mar 20, 2023

I am running into this same issue as well. @leerob Just for kicks, I tried loading your site to test this out, and sure enough, spam clicking your page just after a reload produces the hydration error.

Screen Shot 2023-03-13 at 9 28 06 AM
+7
Kinbaum on Mar 13, 2023

@acdlite looked into this case and found it was accidentally fixed with some other bugfixes to React two weeks ago. I’ve taken @awareness481’s reproduction, upgraded to next@canary, and verified the reproduction steps and can no longer reproduce so I’m going to close this issue as fixed 👍

Codesandbox: https://codesandbox.io/p/github/awareness481/next-app-repro/csb-nhq2u0/draft/trusting-sound?file=%2FREADME.md

+6
timneutkens on Apr 1, 2023

this is awful 😢

+6
nabildroid on Jan 28, 2023

I’ve managed to record a replay using https://replay.io, quite certain it’s something in React. Asked @acdlite to take a look.

+5
timneutkens on Mar 25, 2023

Updated to 13.2.3 and still experiencing the issue. Error is thrown in NotFoundErrorBoundary when interacting with input elements (focusing them) while page is still loading.

Edit: Also cleared .next cache, node_modules and package-lock, still same issue

+4
AdamMikacich on Mar 7, 2023

Same here Using unmodified npx create-next-app@latest --experimental-app & npm run dev

image

+4
H4kt on Jan 24, 2023

A fresh nextjs install and just enabling appDir causes this without doing anything else. Just press F5 over and over again (really fast).

+3
itoutcome on Mar 12, 2023

@faradaytrs @nabildroid just use dynamic imports for the client components.

const Menu = dynamic(() => import("@/components/menu"), {
  loading: () => <p>Loading...</p>,
});
+2
patricijo on Mar 20, 2023

Hey @timneutkens

I have disabled every extension, tried incognito, and multiple browsers (Safari, Edge, Chrome, Arc). Each has the same issue when spam clicking immediately after reloading. I’ve tried on my own site @leerob’s, and the app dir playground https://app-dir.vercel.app/

Here’s the result:

Screen Shot 2023-03-17 at 2 11 55 PM Screen Shot 2023-03-17 at 1 56 48 PM

Update

So what is interesting is that when looking at the network tab, after spam clicking, when the error occurs, all network traffic stops at the favicon request (does not matter which site it is). Just an observation. And when I don’t spam it, I see more traffic coming in after.

Screen Shot 2023-03-17 at 2 06 12 PM
+1
Kinbaum on Mar 17, 2023

Also seeing this. I have interleaved server component > client context > server component > client consumer components, but my understanding is this is allowed.

+1
jabza on Mar 11, 2023

I get this error when I click somewhere while the page is loading

+1
luoweii on Mar 7, 2023

Same error here, clicking anywhere on the page

+1
franzwarning on Mar 6, 2023

any news on this one?

+1
ItayElgazar on Mar 6, 2023
Read more comments on GitHub
← next.js: [NEXT-853] Running development mode on fresh create-next-app not working
next.js: [NEXT-863] Unable to test page components using metadata API with Jest →