Mismatched ID on on server side render app even with react 18

[sharmapukar217]

I'm using radix ui for my project using react 18 for ssr(rakkas js). As per the documentation, it should work without any error but I'm getting Warning: Prop aria-controls did not match. Server: "radix-:R2lq:" Client: "radix-:Rle:"

[andy-hook]

@sharmapukar217 Would you be able to provide a minimal repro via CSB or cloneable project?

[sharmapukar217]

Oh that's solved now. I was going to close this issue. For details check rakkas js

[MrDigii]

Hi, I am using the latest Nextjs 13 Version (13.4.12) with React 18.2.0. It's a clean Nextjs project with the new app directory and Tailwind. If I'm using any of the radix-ui primitives I getting the warning from @radix-ui/react-slot:

Warning: Prop `aria-controls` did not match. Server:

Project: https://github.com/MrDigii/musify

Any ideas?

[joaom00]

@MrDigii Seems to be an issue on the Next.js side vercel/next.js#53216. You can try install the canary version next@canary

[MrDigii]

@joaom00 Oh thank you, now it works 🥇

[Princekrampah]

@joaom00 Thanks, this worked for me too.