codegouvfr / codegouvfr/react-dsfr

Problème d'hydratation React du composant Card

Open
#253 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
496
Forks
99
Avg merge
15h 36m
Merged PRs (30d)
4

Description

Hello,

Quand on utilise le composant Card avec un contenu complexe, une erreur d'hydratation React apparaît dans Next (j'utilise Next 14). Next passe du coup en client side rendering et on perd le bénéfice des composants serveurs.

Le problème semble provenir du fait que le composant Card wrap le contenu de la prop `desc` dans un p. Or HTML ne permet pas de mettre des div dans des p. Du coup, il y une désynchro entre ce que Node rend en corrigeant le HTML a sa façon et ce que le browser rend en le corrigeant à la sienne.

Est-ce délibéré de wrap dans un p les props `desc`, `detail` et `endDetail` ?

Edit: je vois, les exemples du DSFR ne comportent que des p pour la partie description p. ex. et React DSFR a respecté ça. Je me demande si ça ne vaut pas le coup de légèrement dévier du DSFR pour ce cas car sinon, ça rend le composant Card inutilisable pour des composants relativement complexes.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.