Next.js Discord

Discord Forum

How to debug and find whats causing the Hydration error?

Answered
American Kestrel posted this in #help-forum
Open in Discord
Avatar
American KestrelOP
I get hydration errors and errors that say - Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
I end up spending a lot of time trying to find out what's causing that. How to fix these easily
Answered by DirtyCajunRice | AppDir
you are making changes that are client only data in an SSR component
View full answer

28 Replies

Avatar
DirtyCajunRice | AppDir
write better code? read the error? this question isnt answerable
Avatar
American KestrelOP
New to this. Learning as I go.
The issue is the error tells me little about whats causing it
isnt there a debugger or something I could use to atleast know what file or component, if not line number
Avatar
DirtyCajunRice | AppDir
the error literally almost always says exactly that
you just need to read all of it
Avatar
American KestrelOP
Yeah
its the same error each time
no, but in all the lines that follow
are not files of code I wrote
its referencing npm packages etc.
Avatar
DirtyCajunRice | AppDir
then you are either too far up or too far down the stack trace
Avatar
American KestrelOP
How can I use the stack trace
to help me debug
is there something I should be looking for in it
It just looks like a lot of scary word vomit to me;-;
Avatar
DirtyCajunRice | AppDir
by… reading it… haha. you will need to post an actual full error for me to point it out
just takes getting used to knowing what to look for
Avatar
American KestrelOP
Cool
I'll get back to this thread the next time I see one!
Thanks so much
Can we leave this thread open a little longer
im sure m gonna get one soon
Avatar
DirtyCajunRice | AppDir
its normally better to open a new thread
Avatar
American KestrelOP
Ok, will tag you to lyk
Avatar
American KestrelOP
Got it again!
@DirtyCajunRice | AppDir
Image
Image
If these tell you anything, please lmk
Image
Image
Image
Image
Image
I'm confused here.
Sent pictures of all 3 hydration errors
Dont know how to fix them, as Idk where they are
Avatar
DirtyCajunRice | AppDir
yeah the error tells you here
Avatar
DirtyCajunRice | AppDir
you are making changes that are client only data in an SSR component
Answer