Next.js Discord

Discord Forum

Hydration

Unanswered
Himalayan posted this in #help-forum
Open in Discord
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

25 Replies

Toyger
for some reason it changing button inside 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 example
also in LargeCard.js you have (item.sale).toLocaleString() which breaks hydration
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.
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 missing
HimalayanOP
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 asChild to DropdownMenuTrigger at Navbar.js and Sidebar.js
you 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