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 · 27 comments
Open

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

joelachance opened this issue Nov 21, 2024 · 27 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.
@dimitridumont
Copy link

Did you add the component in body (after children)?

@joelachance
Copy link
Author

Did you add the component in body (after children)?

yes!

@ishaanrathodd
Copy link

Did you add the component in body (after children)?

yes!

were you able to fix it? ain't getting a fix

@joelachance
Copy link
Author

@ishaanrathodd no, I didn’t pursue it further.
@dimitridumont it doesn’t seem this is functional, what can I do to help here?

@ishaanrathodd
Copy link

@ishaanrathodd no, I didn’t pursue it further.

@dimitridumont it doesn’t seem this is functional, what can I do to help here?

I got my error fixed by making the file a client component by adding "use client" where the error was found. Try to comment out lines which you think might be the culprit and then find a workaround.

@misterioso013
Copy link

misterioso013 commented Dec 28, 2024 •
edited
Loading

I realized that in my case the blame was on the extensions I used in my browser, they added style in the wrong places,

inside

...
Anyway, I'm using the browser's incognito tab to program with next...
Captura de tela de 2024-12-28 15-29-54

And this also solves it...

@dannysofftie
Copy link

In my case, The Grammarly extension was adding styles in the wrong places and thus the error.
Disabling the extension solved the issue.

@Md-Anamul-Haque
Copy link

Clarification on suppressHydrationWarning Usage in Tag

I have a use case where I add suppressHydrationWarning in the tag like this:

<html lang="en" suppressHydrationWarning>
  <body suppressHydrationWarning>
    ...
  </body>
</html>

@Willy-Wonka28
Copy link

In my case, The Grammarly extension was adding styles in the wrong places and thus the error. Disabling the extension solved the issue.

Hey! I had the same issue and after disabling my Grammarly extension, the error went away.

Thanks!

@joelachance
Copy link
Author

I may dig into this more this in the coming weeks-- I don't have the grammarly extension, but curious if other extensions are to blame.

I'll check the suppressHydrationWarning too, seems like it's likely to be several sources manipulating the same API

@Willy-Wonka28
Copy link

Ok then. I would love to know what you find out.

@ViniciusLima7
Copy link

The same error happens to me, even in an anonymous tab

@Gaurav3697
Copy link

Gaurav3697 commented Jan 27, 2025 •
edited
Loading

suppressHydrationWarning solved my Problem

@ahmvdev
Copy link

ahmvdev commented Jan 29, 2025

Clarification on suppressHydrationWarning Usage in Tag

I have a use case where I add suppressHydrationWarning in the tag like this:

...

this fixed it for me

@joelachance
Copy link
Author

Well, I'm still not sure what the issue is. I created a project using Next Create App, which you can find here.

I used the defaults (see below), installed Speed Insights, and while I'm not getting any data in yet since I'm assuming it's just me hitting this site, I'm not getting any errors.

This feels a bit fragile, given there's so many people having errors, but it works on their vanilla deployment.
Feel free to pull down that repo or throw ideas out. I'll investigate as I have time.

Image

@joelachance
Copy link
Author

I got my error fixed by making the file a client component by adding "use client" where the error was found. Try to comment out lines which you think might be the culprit and then find a workaround.

@ishaanrathodd , I don't think you want to do this on the layout.tsx file. Of all of the files, I'd think that's the one you'd really want coming from the server. There shouldn't be any state in that file.

@Abir-Zayn
Copy link

Abir-Zayn commented Jan 30, 2025 •
edited
Loading

If youre working with nextjs, typescript then follow the procedure. Go the layout.tsx ->

<html lang="en" suppressHydrationWarning>
  <body suppressHydrationWarning>
    ...
  </body>
</html>
``` add the attached code.

@joelachance
Copy link
Author

If youre working with nextjs, typescript then follow the procedure. Go the layout.tsx ->

... add the attached code.

That's what's not working for some folks, myself included @Abir-Zayn

@fathan
Copy link

fathan commented Feb 1, 2025

its work for me, I implement on this comment #89 (comment)

@ViniciusLima7
Copy link

suppressing warnings is not a solution, it's just a palliative, we're just hiding the error.

@aleynaeser
Copy link

Is there a solution for this? When I opened a project from scratch, I got the error. There is only layout and page. suppressHydrationWarning does not seem like a real solution.

@vladilen11
Copy link

Is suppressHydrationWarning recommended for use under production env?

@iiiok
Copy link

iiiok commented Feb 9, 2025

In my case , I use "process.env.STRAPI_BASE_URL" as a para.

I guess it is this env para cause the "This won't be patched up. This can happen if a SSR-ed Client Component used" error.

@frontendDev007
Copy link

I got the same issue I don't use any api and every components/pages is my client side which I use "use client" but also I got error. If you use chrome and some extension on that then this error appears I run same on my brave browser and there is no error.

@mi-heorhi
Copy link

In my case, The Grammarly extension was adding styles in the wrong places and thus the error. Disabling the extension solved the issue.

Hey! I had the same issue and after disabling my Grammarly extension, the error went away.

Thanks!

Hmm... will it persist for other users with the Grammarly extension enabled?

@Alireza9476
Copy link

Alireza9476 commented Feb 20, 2025 •
edited
Loading

In my case I had an id for a button tag that was generated by uuidv4() that was abviously different everytime (lack of knowledge)

const buttonList: numType[] = Array.from({ length: 10 }, (_, i) => ({
  index: uuidv4(), ............................

return (
{buttonList.map((num: numType) => (
      ...............
      <button id={`image-${num.index}`} 
         ........
)

therefore I got this error, fixing it by using another approach
will not fix ur issue but it may help someone else

using incognito is not a bad idea at first, next official website has also some suggestions, just found it by deleting some parts, in my case it showed the exact position where it happend.

@xteqr1
Copy link

xteqr1 commented Feb 25, 2025

In my case, Grammarly and Colozilla extensions were the cause of this problem.

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