The Wayback Machine - https://web.archive.org/web/20220416072458/https://github.com/facebook/react/issues/24384
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: Incorrect Hydration Mismatch Detection during Suspense - "Hydration failed because the initial UI does not match what was rendered on the server." #24384

Open
xiel opened this issue Apr 15, 2022 · 3 comments
Open

Bug: Incorrect Hydration Mismatch Detection during Suspense - "Hydration failed because the initial UI does not match what was rendered on the server." #24384

xiel opened this issue Apr 15, 2022 · 3 comments
Labels
React 18 Type: Bug

Comments

@xiel
Copy link

@xiel xiel commented Apr 15, 2022 •
edited

React version: 18.0.0

Steps To Reproduce

  1. Add a Suspense Boundary
  2. Add a component that will suspend to load some data (faked).
  3. Render at least one sibling component after the suspending component.
  4. Render server-side using renderToPipeableStream()
  5. Render client-side using hydrateRoot()

Reproductions in CodeSandbox:

<>
  <h4>This headline hydrates fine. </h4>
  <SomethingA />{/* Will suspend on client and server */}
  <h3>💥 This element after the suspending Component triggers an error (only in development).</h3>
</>

The current behavior

  • The sibling component following the suspending component is incorrectly seen as a hydration mismatch.
  • Console will show errors (and Next.js will show big error overlay):
Warning: Expected server HTML to contain a matching <h3> in <div>.
    at h3
    at IndexPage
    at Suspense
    at App (webpack-internal:///./pages/_app.js:42:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20638)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23179)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:323:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:825:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:949:27)

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js?ac89:14344:1)
    at tryToClaimNextHydratableInstance (react-dom.development.js?ac89:14372:1)
    at updateHostComponent$1 (react-dom.development.js?ac89:20636:1)
    at beginWork (react-dom.development.js?ac89:22373:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4157:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4206:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4270:1)
  • Depending on the location of the suspending component and their siblings, there are errors or no errors at all. When the suspending component is the last component, there are no errors logged.
  • Error can be suppressed by wrapping the suspending component in a Suspense boundary directly

The expected behavior

  • I expect to be able to use the same fetching mechanism using suspense on server and client in React v18.
    OR
  • If this is unsupported usage, the errors should be more clear and consistent.
@xiel xiel added the Status: Unconfirmed label Apr 15, 2022
@gaearon
Copy link
Member

@gaearon gaearon commented Apr 15, 2022

Small repro: https://codesandbox.io/s/sleepy-dan-ghlh1u?file=/pages/_app.js
@gaearon gaearon added Type: Bug React 18 and removed Status: Unconfirmed labels Apr 15, 2022
@gaearon
Copy link
Member

@gaearon gaearon commented Apr 15, 2022

Minimal repro without Next.js: https://codesandbox.io/s/compassionate-night-uzyxv1?file=/src/App.js
@gaearon
Copy link
Member

@gaearon gaearon commented Apr 15, 2022

Seems like a bug. Weird that I can't repro this in tests.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
React 18 Type: Bug
2 participants
@xiel @gaearon