Hello!
My app is running fine with npm run dev but when I deploy to Vercel or DigitalOcean Apps, I see in the browser console some hydration errors and I don't know how to debug them to solve the problems.
Any idea? Thanks in advance!
#How can I debug hydration errors?
regal steeple
potent gulch
First step is to check it in incognito mode so you know there’s no browser extension fighting you. If you’re using Brave it sometimes messes with the page and causes this on its own
If you are loading any third party js scripts, these can modify the page and break hydration
Dates are a super common reason, since the server is in a different timezone than your client
One of the easier ways to debug is to view source both with js enabled and disabled, then paste into an online html diff tool
That should highlight the differences that are breaking it
Another reason is if you have invalid HTML, the browser will automatically fix it, like moving a div outside of a p or turning nested forms into sibling. Then react throws the hydration error because the browser html doesn’t match
regal steeple
Thank you for the response! I will check your suggestions
regal steeple
It was a problem with the date 🙂
potent gulch
Yeah those are the most common culprit
ornate aspen
You know, I've run into several of these. Is there a blog or something out there that can list out these possible hydration issues?
potent gulch
a few different ways to solve depending on your needs
- format as a date string in your loader
- hide the date in the initial server render
- pass timezone info to the server so it can render the same date as the client (not for the faint of heart)
potent gulch
You know, I've run into several of these. Is there a blog or something out there...
in a day or two there will be
ornate aspen
hah. Awesome! I had one where I had a stupid counter and of course, if you load the page at the wrong time the seconds would be different. And by wrong time I mean most of hte time haha. But sometimes it didn't do it so took me a minute to figure out
potent gulch
Alright I got it finished https://discord.com/channels/770287896669978684/1112458983190564865 cc @ornate aspen @regal steeple
merry cliff
Dates are a super common reason, since the server is in a different timezone tha...
this just bite me hard...
I wasn't getting any errors on my machine (both development / production builds) but i was getting errors when deploying (both development / production builds)
My intention was to send the date and then format it to the browsers locale, but I forgot to place a <ClientOnly> boundary
merry cliff
in a day or two there will be
However I didn't find something like this in the documentation
Closest thing was : https://remix.run/docs/en/1.17.1/pages/gotchas#browser-extensions-injecting-code which outlines one of the possible problems
Oh I seee you posted a blog. However I believe it would be better off writing something about it in the documentation somewhere ^^