Warning: Prop `aria-controls` did not match. Server: "radix-:R15mcq:" Client: "radix-:R4mpj9:"
Unanswered
Netherland Dwarf posted this in #help-forum
Netherland DwarfOP
Hi, i'm using shadcn components and I get this weird warning and can't figure out how to fix it, any idea ?
Thanks 🙂
Thanks 🙂
10 Replies
@Netherland Dwarf Hi, i'm using shadcn components and I get this weird warning and can't figure out how to fix it, any idea ?
Thanks 🙂
Seems like the property is randomly generated. Resulting in a different dom tree on the server and client.
It's confirmed that they're generating the id using: https://github.com/radix-ui/primitives/blob/main/packages/react/id/src/id.tsx
Make sure the order of components isn't changed, for example:
On Server
On Client
Make sure the order of components isn't changed, for example:
On Server
<div>
<UserNewButton /> // radix-0
<Dialog /> // radix-1
</div>On Client
<div>
/* only mounted on client, won't cause hydration error */
{onClient && <ThemeToggle />} //radix-0
<UserNewButton /> // radix-1 -> hydration error
<Dialog /> // radix-2 -> hydration error
</div>It has been reported and I get the bug in my apps too
@fuma It's confirmed that they're generating the id using: https://github.com/radix-ui/primitives/blob/main/packages/react/id/src/id.tsx
Make sure the order of components isn't changed, for example:
**On Server**
tsx
<div>
<UserNewButton /> // radix-0
<Dialog /> // radix-1
</div>
**On Client**
tsx
<div>
/* only mounted on client, won't cause hydration error */
{onClient && <ThemeToggle />} //radix-0
<UserNewButton /> // radix-1 -> hydration error
<Dialog /> // radix-2 -> hydration error
</div>
Netherland DwarfOP
Thank you for your help. The button is always shown and never modified:/
@joulev It has been reported and I get the bug in my apps too
Netherland DwarfOP
Where can I find the report (so I can track when this issue will be patched)
Netherland DwarfOP
They will release the fix in the update (I hope so)