rjsf-team/react-jsonschema-form

SSR and dependencies sections cause hydration errors.

Open

#4083 aperta il 8 feb 2024

Vedi su GitHub
 (1 commento) (0 reazioni) (0 assegnatari)TypeScript (2136 fork)batch import
awaiting responsebughelp wanted

Metriche repository

Star
 (13.175 star)
Metriche merge PR
 (Merge medio 3g 17h) (32 PR mergiate in 30 g)

Descrizione

Prerequisites

What theme are you using?

mui

Version

5.17.0

Current Behavior

When loading this example form using remix.run@2.60 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.

Guida contributor