Hydration failed error. I don't understand where it is coming from/ whats causing this.

[JOKeRiino]

So every time I start the dev server with yarn dev, the page loads just fine and everything seems to work. But the console is giving me the same error 7-10 times: "Hydration failed because the initial UI does not match what was rendered on the server."
It comes along with another error:

"server HTML to contain a matching

in

.
at div
at Cart (http://localhost:3000/src/components/Cart.client.jsx?v=769d1fa1:28:7)
at Suspense
at div
at LocalizationClientProvider"

First of all, I can barely grasp what the first error means, but I don't really understand where it would be coming from, so I tried to initialize a completely new hydrogen instance. In this new instance, when i just comment out the welcome component in the index.server.jsx the same errors seem to happen. Can someone explain please? Why is it producing that error? What UI does it compare to when making the decision?

Also: After the initial start, if I refresh the page often enough the errors will appear again, but rather irregularly.
Any help is appreciated, am really lost here!

[davidhousedev]

It's hard to tell without seeing your code, but I can definitely help you understand the error! Each time you navigate to a page for the first time, two things will happen:

1. Server will send the result of how components rendered on the server, then after a brief delay
2. React and the Hydrogen client are loaded in the browser, enabling client-side interactions in your application

The second step is called "hydration". In order for hydration to be successful, the DOM structure of the application on the server must be identical to the DOM structure when React first initializes in your browser. If there are any differences between what is rendered on the server and what is rendered on the client, then you have an error in hydration.

If you're able to post a link to your repository, I'm sure it would be helpful when debugging. Otherwise, do a careful audit between what's in your repository and what is in the starter template. A few things to check:

• package.json versions
• Contents of App.server.tsx (unless you have changed your server entrypoint)
• Are there any other console errors you're seeing, or is it just hydration errors?

[JOKeRiino]

Hi, thank you for the answer!
I'm still figuring out if its a browser (plugin) problem or not. Apart from this I've got another question for you:

For example, my actual project has an image slider that I've coded into the layout component, to use it on various pages.
This slider uses a setTimeout to change the image every 8 seconds. Could this be the cause of the hydration error?
Im not aware of any other changes that would happen between ssr and hydration, but even this doesn't actually change the dom structure - not that im aware of at least. Feel free to have a look, its surely a newbie error that I'm just not aware of :D

[davidhousedev]

Assuming you're invoking the setTimeout within a useEffect, you should be fine! useEffect will only ever run on the client, after hydration. If you're using setTimeout outside of a useEffect, you'll want to change that right away regardless of whether or not you're encountering hydration issues.

Also note, if you create a timeout in a useEffect, you'll also want to clear it in a return closure from that useEffect hook. See this blog post for more details: https://upmostly.com/tutorials/settimeout-in-react-components-using-hooks

[JOKeRiino]

Yes, yes and yes! That' what I figured anyway. Thx

[blittle]

Hi @JOKeRiino. I apologize for the confusion in the hydration errors. I see that you are on an older version of Hydrogen. Older versions had some issues in the framework that would cause Hydration errors. We still have some to fix, but upgrading to the latest is likely to fix your issue.

[JOKeRiino]

That seems to have solved the problem!

Now I only get a warning about non matching ids in the <ListBox.Button> within the CountrySelector.client Component.
"react-dom.development.js:86 Warning: Prop id did not match. Server: "headlessui-listbox-button-:Rddcq:" Client: "headlessui-listbox-button-:R3bb6:"
at button"
I figured thats not a problem on my side?!

[blittle]

Hmmm, that might be our problem too, though I can't reproduce any warning with the country selector. Did you change the country selector on your end? The newer version of Hydrogen changes so that the available countries are fetched lazily by an API route.