How Serious are Hydration Errors
Answered
Amur catfish posted this in #help-forum
Amur catfishOP
I seem to be constantly having issues with Hydration errors. I'm following a tutorial on youtube that is using Next and ShadCN to build a form. However when I follow the steps I get a hydration error saying isnt expecting a div inside a div and the error seems to be coming from the shadCN form.tsx component and this is all from within a client component.
How seriously should i take these kinds of errors? There seems to be nothing different showing on my page, functionality still works...it seems a bit pedantic or am I completely wrong?
How seriously should i take these kinds of errors? There seems to be nothing different showing on my page, functionality still works...it seems a bit pedantic or am I completely wrong?
Answered by Ray
do you have 1password/lastpass or any other password manager browser extension?
these extension will inject html to the dom which will cause hydration error.
these extension will inject html to the dom which will cause hydration error.
23 Replies
Asian black bear
They mean that your code has subtle React errors, and everything probably works, but if ever it doesn't work debugging will be a nightmare.
I use shadcn and next.js and have 0 hydration errors, so it is not a defect of the shadcn/ui
@Amur catfish I seem to be constantly having issues with Hydration errors. I'm following a tutorial on youtube that is using Next and ShadCN to build a form. However when I follow the steps I get a hydration error saying isnt expecting a div inside a div and the error seems to be coming from the shadCN form.tsx component and this is all from within a client component.
How seriously should i take these kinds of errors? There seems to be nothing different showing on my page, functionality still works...it seems a bit pedantic or am I completely wrong?
do you have 1password/lastpass or any other password manager browser extension?
these extension will inject html to the dom which will cause hydration error.
these extension will inject html to the dom which will cause hydration error.
Answer
@Ray do you have 1password/lastpass or any other password manager browser extension?
these extension will inject html to the dom which will cause hydration error.
Amur catfishOP
What?! really?? I have LastPass....
But actually i dont have the extension though
@Amur catfish What?! really?? I have LastPass....
yes this will definitely cause the error
i have it too
Amur catfishOP
i just use lastpass
@Amur catfish But actually i dont have the extension though
you don't have the extension?
Amur catfishOP
ah wait
yes i do
lol
disable it and try again
@Ray disable it and try again
Amur catfishOP
Oh dear lord it works normally now. That is absolutely ridiculous. i spent hours trying to understand why i'm getting these hydration errors
How did you figure out that thats what was causing it??
@Amur catfish How did you figure out that thats what was causing it??
because I knew it will inject html to the input
@Ray because I knew it will inject html to the input
Amur catfishOP
The main one i was getting was Div inside Div which made no sense to me. I just one that comes and goes saying <a> inside a <div> but then when i refresh it goes away and then maybe later it comes back again. I really dont get it
@Amur catfish Oh dear lord it works normally now. That is absolutely ridiculous. i spent hours trying to understand why i'm getting these hydration errors
yeah It is hard to know what happen from the error message lol
@Ray yeah It is hard to know what happen from the error message lol
Amur catfishOP
Thank you so much, really appreciate it
Giant panda
Most of the time, hydration issues are caused by mismatches in HTML elements or by browser extensions
@Giant panda Most of the time, hydration issues are caused by mismatches in HTML elements or by browser extensions
Amur catfishOP
Not once in an Stack Overflow post or doc i read did it mention things like browser extensions. I feel like that needs to be mentioned on the Next Docs right at the top of the page with a giant asterix so nobody will ever miss it.
Giant panda
you can raise a issue on github
@Amur catfish Not once in an Stack Overflow post or doc i read did it mention things like browser extensions. I feel like that needs to be mentioned on the Next Docs right at the top of the page with a giant asterix so nobody will ever miss it.
https://nextjs.org/docs/messages/react-hydration-error (the link also shown in the hydration error message):
## Common Causes
5. Browser extensions modifying the HTML.