Error: Hydration failed because the initial UI does not match what was rendered on the server.
Answered
Sun bear posted this in #help-forum
Sun bearOP
Is there any1 who could help me with this error? I've just upgraded NextJS from 12.x.x to latest (14.x.x)
Please DM me 🙂 Heeelp!
Thank you
Please DM me 🙂 Heeelp!
Thank you
19 Replies
Sun bearOP
and there are 3 errors (3 of 3)... and the last one has a bit different error msg:
Hmm normally the hydration errors in the newer versions are more detailed… that’s weird
Sun bearOP
:>
yeah that's why I'm not sure what is wrong there...
I use Styled components... maybe that's the reason
@Sun bear I use Styled components... maybe that's the reason
Can you comment out specific parts of your app one after another? Start with commenting out nearly everything and then split it. That’s the fastest way to find the specific part in your app, that causes the hydration error. When we found the specific part, we can resolve it
Sun bearOP
yikes ;D ok i'll try
@Sun bear Click to see attachment
the browser console should display more information than this
Sun bearOP
yeah I found the issues... generally wrong nested html elements
Answer
Sun bearOP
for example <a> inside <a> because of the <Link>
fixing everywhere those right now ;q
but really thank you @B33fb0n3 , it's because you suggested to comment everything one by one 😉
so I was able to found those issues
too bad that it's not informed in this error box from next