The code returns the following error:
A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
<MenuProvider scope={{Menu:[...], ...}} open={false} onOpenChange={function useCallbackRef.useMemo} content={null} ...>
<MenuProvider scope={{Menu:[...], ...}} onClose={function Menu.useCallback} isUsingKeyboardRef={{current:false}} ...>
<DropdownMenuTrigger asChild={true}>
<DropdownMenuTrigger data-slot="dropdown-m..." asChild={true}>
<MenuAnchor asChild={true} __scopeMenu={{Menu:[...], ...}}>
<PopperAnchor __scopePopper={{Menu:[...], ...}} asChild={true} ref={null}>
<Primitive.div asChild={true} ref={function}>
<Primitive.div.Slot ref={function}>
<Primitive.div.SlotClone ref={function}>
<Primitive.button type="button" id="radix-_R_2..." aria-haspopup="menu" aria-expanded={false} ...>
<Primitive.button.Slot type="button" id="radix-_R_2..." aria-haspopup="menu" ...>
<Primitive.button.SlotClone type="button" id="radix-_R_2..." aria-haspopup="menu" ...>
<button
className="flex items-center gap-2 rounded-lg p-1.5 transition-colors hover:bg-secondary"
aria-label="User menu"
type="button"
+ id="radix-_R_2datplb_"
- id="radix-_R_9matplb_"
aria-haspopup="menu"
aria-expanded={false}
aria-controls={undefined}
data-state="closed"
data-disabled={undefined}
disabled={false}
data-slot="dropdown-menu-trigger"
onPointerDown={function handleEvent}
onKeyDown={function handleEvent}
ref={function}
>
...
at button (<anonymous>)
at TopNav (components/dashboard/top-nav.tsx:92:13)
at DropdownMenuTrigger (components/ui/dropdown-menu.tsx:27:5)
at TopNav (components/dashboard/top-nav.tsx:91:11)
at AppShell (components/dashboard/app-shell.tsx:15:7)
at DashboardPage (app/page.tsx:10:5)
90 | <DropdownMenu>
91 | <DropdownMenuTrigger asChild>
> 92 | <button className="flex items-center gap-2 rounded-lg p-1.5 transition-colors hover:bg-secondary" aria-label="User menu">
| ^
93 | <Avatar className="size-8">
94 | <AvatarImage src="" alt="Emeka Okonkwo" />
95 | <AvatarFallback className="bg-primary text-xs font-semibold text-primary-foreground"> (<anonymous>)
Revise the code to address the error.
I was previewing: /