Next.js Discord

Discord Forum

Getting error Hydration failed , I am unable to solve

Answered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <button> in <button>.
getting this error , How to handle this
Answered by joulev
in navbar.tsx:
you cannot nest button inside button.
the SheetTrigger already renders a button by default so that causes the error
to fix, use asChild:
- <SheetTrigger>
+ <SheetTrigger asChild>
View full answer

33 Replies

American black bearOP
Getting this error
joulev
I meant you need to show us some code
American black bearOP
I dont know where this error occur
joulev
Remove parts of your pages until the error goes away
American black bearOP
I am finding the cause of this but unable to get
joulev
Then you will know the place the error occurs
With this much info we cannot help with anything
American black bearOP
i have 5-6 pages routes🙂🙂
@joulev Then you will know the place the error occurs
American black bearOP
how I will share codes ?
@American black bear how I will share codes ?
joulev
Have you isolated the error and now know where the error is from?
If yes then post here the relevant code snippet
American black bearOP
No i am still looking in which page error happend
can i share link or repositery
joulev
yes, but make it as minimal as possible. if it's too large or complicated to set up (with db etc) then i may not have time to check it
American black bearOP
okay its only frontend only first page is completed
here it is
American black bearOP
in the (routes) dashboard all the pages are here
its dashboard
@American black bear https://github.com/the-akleem91/Project-website/tree/main/buddy-ai
joulev
in navbar.tsx:
you cannot nest button inside button.
the SheetTrigger already renders a button by default so that causes the error
to fix, use asChild:
- <SheetTrigger>
+ <SheetTrigger asChild>
Answer
American black bearOP
wait I will try
thank you. for the help its solvede
i did not know that it render a button by defayult
joulev
umm. that's what radix does
American black bearOP
okh thank you , Got it
Morelet’s Crocodile
Hi ! I am working in my project and I have got this error
can you help me !
this my code
@Morelet’s Crocodile Hi ! I am working in my project and I have got this error
joulev
though the error is the same, the bug is completely unrelated to the bug in this post, please make a new post
@Morelet’s Crocodile this my code
joulev
btw div doesn't have asChild. asChild is a radix thing
@joulev though the error is the same, the bug is completely unrelated to the bug in this post, please make a new post
Morelet’s Crocodile
yes,,, thank ! I am try to find the source of this problem and to give the new post
@joulev btw `div` doesn't have `asChild`. `asChild` is a radix thing
Morelet’s Crocodile
okay