ansforge / ansforge/DesignSystem

Prop 'title' did not match. Server: "xxx" Client: "yyy"

Offen
#26 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug
Vorherrschende Sprache
HTML
Sterne
6
Forks
1
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

Bonjour,

Pour reproduire le problème, je vous joins le [dépôt](https://github.com/ansforge/Calculateur-empreinte-SIH) en question.

J'ai intégré le design system sur NextJs 14.1.3 avec le code suivant :
```javascript

<Script
src="./script/vendor.js"
strategy="beforeInteractive"
/>
<Script
src="./script/app.js"
strategy="beforeInteractive"
/>
```
J'ai aussi suivis les instructions du fichier `layout-base.html`.

# Premier problème
L'infobulle fonctionne au premier chargement mais avec le message d'erreur suivant : `Prop 'title' did not match. Server: "" Client: "<p>à renseigner</p>"`. C'est dommage mais ça fonctionne (j'ai cherché sur internet mais les solutions ne sont pas adapté à mon contexte).
Puis, quand je vais sur une autre page et que je reviens sur la première page en utilisant la navigation de NextJs (via le composant `Link`) alors l'infobulle ne s'affiche plus, c'est le `title` qui s'affiche.
Je suppose que les scripts ne se chargent plus...

# Second problème
Les onglets et l'accordéon ne fonctionnent pas, le contenu est affiché par défaut sans message d'erreur et en regardant la source, je vois bien que le DOM n'est pas modifié.

Votre design system fonctionne très bien sur une page HTML basique mais dans mon contexte, j'ai du mal à comprendre ce qu'il peut manquer.
J'ai l'intuition qu'il y a un problème d'hydratation mais où ?
J'ai déjà utilisé le design system de l'état et je n'ai jamis eu de problème avec si ça peut aider.

Auriez vous une idée pour m'aider ?
Connaissez vous un site qui utilise le DS avec React ou NextJs ?
Je me tiens disponible pour en discuter de vive voix au besoin, @mfaurel a mon contact.

Fabien

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

Beginne mit der verlinkten Reproduktion von Calculateur-empreinte-SIH und den Integrationsanweisungen in layout-base.html; reproduziere das Problem anschließend in Next.js 14.1.3 mit Link-Navigation. Verfolge die drei Skripte und das Hydration-Verhalten; abgeschlossen ist die Aufgabe, wenn Tooltip, Tabs und Accordion nach der Navigation ohne einen Title-Mismatch funktionieren.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, nextjs
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
28/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.