search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.47k stars 27.04k forks source link

[NEXT-855] [AppDir] Interacting with Client Component before page fully load cause Hydration failed error. #45047

Closed lelabo-m closed 1 year ago

lelabo-m commented 1 year ago

Verify 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

lelabo-m commented 1 year ago

Updated to next@13.1.3 to see if I get better errors message about the hydration error.

Both the react dev overlay and inspect console seems to be the exact same...

awareness481 commented 1 year ago

I can't repro on either dev/prod https://github.com/awareness481/next-app-repro (here's the repo in case I didnt follow the instructions correctly)

Edit: If I reload the page and spam-click the button I can indeed reproduce the issue

njarraud commented 1 year ago

I have this issue on first load as well. If it interact with the page by any means before it is fully loaded I get an error.

  1. In dev mode:

    Capture d’écran 2023-01-20 à 21 56 24

  2. In production mode:

    Capture d’écran 2023-01-20 à 22 01 06

If the page is very light you have to be super quick :grin:

hamzashah0302 commented 1 year ago

same with me , but i have fixed it with useEffect method , my case was i fetched the data from api, then i render component conditionally, the problem was conditional render ,

H4kt commented 1 year ago

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

image

Roma79794 commented 1 year ago

Same problem. I get this error when I click somewhere on the Next js 13.1.6 canary default home page while the page is loading

nabildroid commented 1 year ago

this is awful :'(

ItayElgazar commented 1 year ago

any news on this one?

franzwarning commented 1 year ago

Same error here, clicking anywhere on the page

ItayElgazar commented 1 year ago

I actually dont need to click, it happens sometimes just after the page renders

On Mon, 6 Mar 2023 at 21:23, Raymond Kennedy @.***> wrote:

Same error here, clicking anywhere on the page

— Reply to this email directly, view it on GitHub https://github.com/vercel/next.js/issues/45047#issuecomment-1456921208, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEBPZCAXSXI7YHNMQLAUZG3W2ZBVJANCNFSM6AAAAAAUAPAYMA . You are receiving this because you commented.Message ID: <vercel/next. @.***>

franzwarning commented 1 year ago

@ItayElgazar could it be something like:

// layout.tsx
<ClientContext>
  <ServerComponent2>
    <ClientComponentThatConsumesContext />
  </ServerComponent2>
</ClientContext>

? Just throwing out possible causes...

ItayElgazar commented 1 year ago

@franzwarning I tried removing basically every provider, layout, links and some odd components just to rule out this issue, I suspect that it happens when I fetch data using server component (with async await) 🤷‍♂️🤦‍♂️

franzwarning commented 1 year ago

@ItayElgazar can you replicate on codesandbox?

franzwarning commented 1 year ago

~@ItayElgazar I figured it out for my case -- I was importing a css file from node_module in a client component~

still haven't figured it out..

ItayElgazar commented 1 year ago

@franzwarning

Okay that's interesting! Sorry I'm afk, when I'm back I'll post here a link to codesandbox.

Can you share with me what exactly you removed? I don't think I'm using any external css other than tailwind :(

franzwarning commented 1 year ago

@ItayElgazar ~do you use headlessui by chance? I also noticed my <body> was getting set with overflow:hidden if I clicked at the right time during hydration. Hit me on telegram https://t.me/franzwarning and we can debug together, and post the result here~. Not relevant.... I have no idea what's causing this issue but it's still happening. (on focus and on click)

luoweii commented 1 year ago

image

luoweii commented 1 year ago

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

franzwarning commented 1 year ago

Update -- when I clear my .next cache and restart my next dev server it starts working. It could be something with the cache returning old information on dynamic pages? Doesn't explain the fact it only happens when you click though....

AdamMikacich commented 1 year ago

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

jabza commented 1 year ago

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

itoutcome commented 1 year ago

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

Kinbaum commented 1 year ago

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
timneutkens commented 1 year ago

Most of these we've seen so far are caused by browser extensions installed which is likely why you can reproduce it on any site @Kinbaum, can you narrow down which extension is causing it?

Kinbaum commented 1 year ago

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
JayAdra commented 1 year ago

Same here. Any update on this? Seems wild this has been an issue for 2 months with no fix.

faradaytrs commented 1 year ago

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

nabildroid commented 1 year ago

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

patricijo commented 1 year ago

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

const Menu = dynamic(() => import("@/components/menu"), {
  loading: () => <p>Loading...</p>,
});
timneutkens commented 1 year ago

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.

timneutkens commented 1 year ago

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

timneutkens commented 1 year ago

@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

github-actions[bot] commented 1 year ago

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.