How Serious are Hydration Errors

[astral obsidian]

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?

[wide raven]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[wintry temple]

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

[tribal dew]

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.

[astral obsidian]

What?! really?? I have LastPass....

But actually i dont have the extension though

[tribal dew]

yes this will definitely cause the error

i have it too

[astral obsidian]

i just use lastpass

[tribal dew]

you don't have the extension?

[astral obsidian]

ah wait

yes i do

[tribal dew]

lol

disable it and try again

[astral obsidian]

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??

[tribal dew]

because I knew it will inject html to the input

[astral obsidian]

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

[tribal dew]

yeah It is hard to know what happen from the error message lol

[astral obsidian]

Thank you so much, really appreciate it

[vivid night]

Most of the time, hydration issues are caused by mismatches in HTML elements or by browser extensions

[astral obsidian]

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.

[vivid night]

you can raise a issue on github

[timber stone]

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.