Hydration
Unanswered
Himalayan posted this in #help-forum
HimalayanOP
Hi I am practice Next JS and it's show this error I dont know how to fix this can someone help me please
https://github.com/Issacboox/ecom-next
https://github.com/Issacboox/ecom-next
25 Replies
Toyger
for some reason it changing button inside
you have couple such occurrences in Sidebar.js and Navbar.js
you better use shadcn button instead default one like this:
like in example on their site https://ui.shadcn.com/docs/components/dropdown-menu
DropdownMenuTrigger and it breaks.you have couple such occurrences in Sidebar.js and Navbar.js
you better use shadcn button instead default one like this:
import { Button } from "@/components/ui/button"like in example on their site https://ui.shadcn.com/docs/components/dropdown-menu
HimalayanOP
Thank you so much
but why it's still hydration after i fix it
@Himalayan https://tenor.com/view/funny-no-sad-crying-cry-gif-9380576491190815369
Toyger
should be fine, can you update repo on github
HimalayanOP
oki i did
HimalayanOP
@Himalayan Click to see attachment
Toyger
add
asChild to DropdownMenuTrigger like from shadcn examplealso in LargeCard.js you have
you either need to offload it to useEffect, either change somehow different, because througout hydration it don't have locale, so data will be different.
(item.sale).toLocaleString() which breaks hydrationyou either need to offload it to useEffect, either change somehow different, because througout hydration it don't have locale, so data will be different.
HimalayanOP
@Himalayan Click to see attachment
Toyger
not to closing one, to opening one
HimalayanOP
oh i see my badd
i did add asChild but
how to avoid this err
@Himalayan how to avoid this err
Toyger
you missed something, for me after adding asChild all
<button> errors missingHimalayanOP
what should i do
Can you help me pls
@Himalayan Can you help me pls
Toyger
hmm, it show me error again, now I will try to download repo again and fix it.
HimalayanOP
what about i streaming my screen on discord is that ok if u dont mind can i invite u to my discord
@Himalayan what about i streaming my screen on discord is that ok if u dont mind can i invite u to my discord
Toyger
it will take more time like this, easier if I'll test it myself.
HimalayanOP
oki thank u so much
@Himalayan oki thank u so much
Toyger
yeah
you need to add
you have 3 such elements, so 2 at Navbar, 1 at Sidebar
but in Sidebar.js you have
you need to add
asChild to DropdownMenuTrigger at Navbar.js and Sidebar.jsyou have 3 such elements, so 2 at Navbar, 1 at Sidebar
but in Sidebar.js you have
{" "}<Button..... so it's 2 elements, but asChild allow one only, so you either need to remove {" "} but if you need it, you need to wrap this to elements to react fragment <></> like on screenshot:HimalayanOP
it's workkkk thank you so much