Help with Hydration Error
Answered
Morelet’s Crocodile posted this in #help-forum
Morelet’s CrocodileOP
Hello! I'm new to NextJS. I've inherited a code base to maintain, which was working fine until I tried running a dev server today. No changes to the code, but suddenly getting a Hydration error, and I have no idea how to figure out what is provoking it or how to fix it. Or why the error is happening despite no changes to the code. The error is:
Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
Expected server HTML to contain a matching <label> in <div>.
<Home>
<main>
<div>
<div>
<div>
<ContactForm>
<div>
<div>
<Input>
<div>
<label>
Where the last div and label elements are highlighted. Any helpful assistance is appreciated!
Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
Expected server HTML to contain a matching <label> in <div>.
<Home>
<main>
<div>
<div>
<div>
<ContactForm>
<div>
<div>
<Input>
<div>
<label>
Where the last div and label elements are highlighted. Any helpful assistance is appreciated!
Answered by James4u (Tag me if needed)
wait before all, the best way is to open your localhost in a incognitor mode, if you have some extensions in your browser, they can cause hydration error
22 Replies
@Morelet’s Crocodile
Show me your codebase if you don't mind
Show me your codebase if you don't mind
Morelet’s CrocodileOP
@James4u (Tag me if needed) I can give you view on Github, what's your handle there?
is it a private repo? you can show me the code for the page - don't need entire codebase
Morelet’s CrocodileOP
Okay, what's the best way to show that here?
I don't want to dump a bunch of text
yeah, you can copy paste here in a good format
Morelet’s CrocodileOP
I'll give it a try, I don't usually use discord for big text blobs heh
Does that work? I was trying to do the markdown backticks for code block but when I paste it forced into a .txt doc
Sorry if I go in and out here, I'm DM'ing a D&D session lol. I really appreciate your help!
I feel like one of your sections is causing hydration error
wait before all, the best way is to open your localhost in a incognitor mode, if you have some extensions in your browser, they can cause hydration error
Answer
so check in incognitor mode, and then let me know
Morelet’s CrocodileOP
okay will do, will let you know results
Morelet’s CrocodileOP
@James4u (Tag me if needed) Right on, no error in icognito mode! So maybe a Chrome or Add-On update is what messed things up on the dev server? I'll deploy to Vercel next to see what happens there. It's a branch, so it will be a preview.
Morelet’s CrocodileOP
By the way, which section might be the issue? Is there anything in that section that is done incorrectly that I should be correcting anyway?
Nope, if you don't have any hydration error in the incognitor mode, no issues in your code
go coding!
it's just chrom extension on your browser
Morelet’s CrocodileOP
Thank you so much!
cool!
mark solution to close this thread @Morelet’s Crocodile
mark solution to close this thread @Morelet’s Crocodile
Morelet’s CrocodileOP
Will do!