Next.js Discord

Discord Forum

ERROR: hydration-mismatch

Answered
Asian black bear posted this in #help-forum
Open in Discord
Avatar
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 Asian black bear
It’s your Video Speed Controller and Grammarly extensions. Disable them or run the app in incognito mode.
View full answer

1 Reply

Avatar
Asian black bear
It’s your Video Speed Controller and Grammarly extensions. Disable them or run the app in incognito mode.
Answer