Next.js Discord

Discord Forum

ERROR: hydration-mismatch

Answered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. 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 state={{nextId:1, ...}} dispatcher={{...}}>
        <DevRootHTTPAccessFallbackBoundary>
          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
            <HTTPAccessFallbackErrorBoundary pathname="/dashboard..." notFound={<NotAllowedRootHTTPFallbackError>} ...>
              <RedirectBoundary>
                <RedirectErrorBoundary router={{...}}>
                  <Head>
                  <link>
                  <script>
                  <script>
                  <RootLayout>
                    <html lang="en">
                      <body
+                       className="inter_344b1c37-module__itG8Hq__className antialiased"
-                       className="inter_344b1c37-module__itG8Hq__className antialiased vsc-initialized"
-                       data-new-gr-c-s-check-loaded="14.1210.0"
-                       data-gr-ext-installed=""
                      >
                  ...
        ...


Im getting this error on one of my components ... I dont know what is causing it!
Answered by Giant panda
It’s your Video Speed Controller and Grammarly extensions. Disable them or run the app in incognito mode.
View full answer

1 Reply

Giant panda
It’s your Video Speed Controller and Grammarly extensions. Disable them or run the app in incognito mode.
Answer