What is <IdProvider>?

[VaibhavAcharya]

I am using stitches with Next.js and keep getting this warning:
When server rendering, you must wrap your application in an <IdProvider> to ensure consistent ids are generated between the client and server.

On the client side the id's are not matching up and causing console errors like:
Warning: Prop 'aria-controls' did not match. Server: "dialog-25" Client: "dialog-1" at button

I understand this component helps in generating unique id's but due to the lack of documentation I don't know where to locate this component in lib ?

To reproduce :

https://github.com/VaibhavAcharya/humane-ui

---

By the way thank you for this amazing library ❤

[peduarte]

Hi, IdProvider is a Radix UI Component to ensure that when you server-side render your application, the generated IDs are matching on both the server and client.

Here's some more information about it: https://radix-ui.com/primitives/docs/overview/server-side-rendering

yarn add '@radix-ui/react-id';

Then import it:

import { IdProvider } from '@radix-ui/react-id';

And wrap your App in it:

export default () => {
  return <IdProvider>...</IdProvider>
}

This will be documented soon

[VaibhavAcharya]

Strange but it's still behaving the same.

My _App.js file.

[peduarte]

hmm.. that should have fixed it. i don't see Stitches in your package.json. Maybe try upgrading to 0.1.0? Otherwise, I think this will require a reproduction so we can debug. Also pinging @benoitgrelard as it could be a Radix UI related issue.

I'll close this discussion since the question has been answered, but please do open an actual issue if you're still having problems. Thanks!

[benoitgrelard]

That should be all there needs to be done, follow that ssr guide and that's it. If you still have an issue, open one here: https://github.com/radix-ui/primitives/issues/new/choose