Next.js Discord

Discord Forum

Upgraded Next.js from 14 to 15 - Getting Hydration Error on <body>

Answered
Schneider’s Smooth-fronted Caima… posted this in #help-forum
Open in Discord
Avatar
Schneider’s Smooth-fronted CaimanOP
I would like to keep this class on my body, but when I do so I get a hydration error. Is there anything I can do to resolve this?
Hydration error: <body className="overflow-hidden bg-white">
No hydration error: <body>
Image
Answered by B33fb0n3
as you can see, you have two times the body. That causes the hydration error
Image
View full answer

30 Replies

Avatar
Avatar
Schneider’s Smooth-fronted CaimanOP
😮 it's Video Speed Controller extension in Chrome that's causing this?
would have never guessed.. is it something Next.js needs to fix on their end? or these Chrome extensions? getting this error is rather confusing if it's not Next related at all
oh for me I get the error with Incognito Mode too, so maybe it's not the extension
Avatar
try in guest mode
Avatar
Schneider’s Smooth-fronted CaimanOP
there is a guest mode in Chrome for incognito?
I thought it would be signed out already
Avatar
it should be under your profiles
Image
Avatar
Schneider’s Smooth-fronted CaimanOP
Oh sorry, I see now - it's another mode offered with Chrome (never used this before)
but nah, I checked and it's the same hydration error
Avatar
you are using the nextui theme provider, right?
Avatar
Schneider’s Smooth-fronted CaimanOP
I am using Tailwind
Avatar
can you share the part of your code:
Hydration error: <body className="overflow-hidden bg-white">
No hydration error: <body>
Avatar
Schneider’s Smooth-fronted CaimanOP
Image
Image
Avatar
can you share your layout as well?
Avatar
Schneider’s Smooth-fronted CaimanOP
Image
Is it because I am using <body> twice? once in layout and another in page?
Avatar
as you can see, you have two times the body. That causes the hydration error
Image
Answer
Avatar
Schneider’s Smooth-fronted CaimanOP
but it only gives hydration error when I add className
without that it's fine
Avatar
still remove one. Only one body tag is allowed
Avatar
Schneider’s Smooth-fronted CaimanOP
that fixed it 🙂
Image
Thanks
Avatar
happy to help
Avatar
Schneider’s Smooth-fronted CaimanOP
On another note, when I run pnpm run dev I get this message:

⚠ Your project has @next/font installed as a dependency, please use the built-in next/font instead. The @next/font package will be removed in Next.js 14. You can migrate by running pnpm dlx @next/codemod@latest built-in-next-font .. Read more: https://nextjs.org/docs/messages/built-in-next-font
I tried running pnpm dlx @next/codemod@latest built-in-next-font but still getting the warning
maybe I can start a new forum post about this
Avatar
This thread has already been solved. Please create a new thread. You are allowed to ping me once in your new thread for that specific topic
Avatar
Schneider’s Smooth-fronted CaimanOP
this warning was shown with nextjs 14 and nextjs 15, OK no problem I will ask there