primitives: [Id] SSR – Mismatched server / client ids when running in `StrictMode`

Original report via Discord:

I’m trying to create a Dialog with IdProvider and I can’t understand why SSR doesn’t work, I got an error: Prop aria-controls did not match. Server: “radix-id-0-1” Client: “radix-id-0-4”

https://codesandbox.io/s/radixui-idprovider-ssr-mismatch-i3o1x

This is reproducible in our current SSR testing app since StrictMode was added in https://github.com/radix-ui/primitives/pull/795

Wrapping React.StrictMode or setting reactStrictMode: true in next.config is equivalent afaik.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 10
Comments: 29 (5 by maintainers)

Most upvoted comments

@DennieMello Can you check if this is an issue on the Next.js side? #1684 (comment)

Thanks, fixed in next: “13.4.13”.

DennieMello on Aug 8, 2023

Awesome @jjenzz thanks!

ajrussellaudio on Jan 13, 2022

@ajrussellaudio If you are able to upgrade to the latest versions of the primitives, the IdProvider is no longer needed and these warnings should all go away regardless of what React version you are on.

jjenzz on Jan 13, 2022

Possible react-18 solution? https://github.com/reactwg/react-18/discussions/111

coderinblack08 on Nov 16, 2021

I agree that this warning is not ideal but our options to resolve it without compromise are limited. In order to deal with this today we’d likely need to render id’s on the client only, this has performance and a11y consequences.

Once stable our best bet will be useOpaqueIdentifier. For now disabling StrictMode remains the best workaround 🙏

andy-hook on Oct 5, 2021

My logs gets filled up with this

espired on Oct 5, 2021

This issue isn’t exclusive to Radix, it exists in many other id implementations in popular libraries. I need to speak with the team and see how we feel given the options available to us.

Yeah, I created an issue in react-spectrum (https://github.com/adobe/react-spectrum/issues/2231) for react-aria to see how they react and what ideas they might have as well.

Thanks for the quick response @andy-hook - and yes, I did exactly that 😅 strictMode disabled for now

csantos1113 on Aug 19, 2021

Any updates on this?

Not since my follow up, one workaround is disabling StrictMode for now. The problem is only visible in development and production builds should behave as expected.

This issue isn’t exclusive to Radix, it exists in many other id implementations in popular libraries. I need to speak with the team and see how we feel given the options available to us.

andy-hook on Aug 19, 2021