rjsf-team/react-jsonschema-form

SSR and dependencies sections cause hydration errors.

Open

#4.083 aberto em 8 de fev. de 2024

Ver no GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (2.136 forks)batch import
awaiting responsebughelp wanted

Métricas do repositório

Stars
 (13.175 stars)
Métricas de merge de PR
 (Mesclagem média 3d 17h) (32 fundiu PRs em 30d)

Description

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.

Guia do colaborador