Upgraded Next.js from 14 to 15 - Getting Hydration Error on <body>
Answered
Schneider’s Smooth-fronted Caima… posted this in #help-forum
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:
No hydration error:
Hydration error:
<body className="overflow-hidden bg-white">No hydration error:
<body>Answered by B33fb0n3
as you can see, you have two times the body. That causes the hydration error
30 Replies
@Schneider’s Smooth-fronted Caiman 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>`
you want to read this: https://nextjs-forum.com/post/1316968439793057872
@B33fb0n3 you want to read this: https://discord.com/channels/752553802359505017/1316968439793057872
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
@B33fb0n3 try in guest mode
Schneider’s Smooth-fronted CaimanOP
there is a guest mode in Chrome for incognito?
I thought it would be signed out already
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
you are using the nextui theme provider, right?
@B33fb0n3 you are using the nextui theme provider, right?
Schneider’s Smooth-fronted CaimanOP
I am using Tailwind
@Schneider’s Smooth-fronted Caiman I am using Tailwind
can you share the part of your code:
Hydration error: <body className="overflow-hidden bg-white">
No hydration error: <body>
Schneider’s Smooth-fronted CaimanOP
can you share your layout as well?
Schneider’s Smooth-fronted CaimanOP
Is it because I am using <body> twice? once in layout and another in page?
Answer
Schneider’s Smooth-fronted CaimanOP
but it only gives hydration error when I add className
without that it's fine
still remove one. Only one body tag is allowed
Schneider’s Smooth-fronted CaimanOP
that fixed it 🙂
Thanks
happy to help
@B33fb0n3 happy to help
Schneider’s Smooth-fronted CaimanOP
On another note, when I run
⚠ Your project has
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-fontI tried running
pnpm dlx @next/codemod@latest built-in-next-font but still getting the warningmaybe I can start a new forum post about this
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
Schneider’s Smooth-fronted CaimanOP
this warning was shown with nextjs 14 and nextjs 15, OK no problem I will ask there