SSR and dependencies sections cause hydration errors.

[KeiranHines]

Prerequisites

• [X] I have searched the existing issues
• [X] I understand that providing a SSCCE example is tremendously useful to the maintainers.
• [X] I have read the documentation
• [X] Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

mui

Version

5.17.0

Current Behavior

When loading this example form using [email protected] and cloudflare pages for server side rendering, the default value of "yes" in "a" causes a Prop 'aria-controls' did not match. Server: ":R2alajar9lacn96acp:" Client: ":R4lal6ir9lacn96acp:" div error as Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

This causes the frontend to render incorrectly at plain HTML.

Expected Behavior

The UI renders correctly and Hydration is not broken. Ideally the dependency is evaluated before first render causing the initial state to be with the dependency visible.

Steps To Reproduce

1. Startup a new remix, run project with mui and rjsf dependencies
2. use the linked playground schema to create a new form.
3. Form is broken.

codepen of github repo can be provided if required.

Environment

- OS: Windows 11
- Node: 18.17.1
- npm: 8.13.2

Anything else?

I have not tested other SSR engines or other remix engines to validate the behavior on other runtimes.

[heath-freenome]

@KeiranHines I don't know how you might be able to fix this. Since SSR doesn't render more that once, it is possible that component updates are happening on the client that doesn't happen on the server. We would welcome any fixes you might come up with to support SSR. Unfortunately, we do not have the bandwidth to debug this for you. Sorry.