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.

Sign up for GitHub

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

Hydration failed because the server rendered HTML didn't match the client. #89

Open
joelachance opened this issue Nov 21, 2024 · 0 comments
Open

Hydration failed because the server rendered HTML didn't match the client. #89

joelachance opened this issue Nov 21, 2024 · 0 comments

Comments

@joelachance
Copy link

When rendering my Next app, I'm getting an SSR error from SpeedInsights. How do I know it's from Speed Insights? I can comment it out and the error goes away.

Here's the error:

react-dom-client.development.js:4100 Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  ...
    <HotReload assetPrefix="">
      <ReactDevOverlay onReactError={function} state={{nextId:1, ...}} dispatcher={{...}}>
        <DevRootNotFoundBoundary>
          <NotFoundBoundary notFound={<NotAllowedRootNotFoundError>}>
            <NotFoundErrorBoundary pathname="/" notFound={<NotAllowedRootNotFoundError>} notFoundStyles={undefined} ...>
              <RedirectBoundary>
                <RedirectErrorBoundary router={{...}}>
                  <Head>
                  <link>
                  <script>
                  <script>
                  <RootLayout>
                    <html lang="en">
                      <head>
                      <body>
                      <SpeedInsights2>
+                       <Suspense fallback={null}>
                      ...
                  ...
        ...

    at throwOnHydrationMismatch (react-dom-client.development.js:4100:11)
    at updateSuspenseComponent (react-dom-client.development.js:8728:15)
    at beginWork (react-dom-client.development.js:9972:18)
    at runWithFiberInDEV (react-dom-client.development.js:543:16)
    at performUnitOfWork (react-dom-client.development.js:14996:22)
    at workLoopConcurrent (react-dom-client.development.js:14990:9)
    at renderRootConcurrent (react-dom-client.development.js:14965:15)
    at performWorkOnRoot (react-dom-client.development.js:14300:13)
    at performWorkOnRootViaSchedulerTask (react-dom-client.development.js:15852:7)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:44:48)

I'm seeing some Stack Overflows referencing issues where you might have HTML elements inside one another, like p els inside other p els, etc.

You can silence this error by doing this.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@joelachance