Problème de React-tooltip et Next.js SSR

Question

J'utilise la bibliothèque react-tooltip dans mon application Next.js.

J'ai remarqué que chaque fois que j'actualise un site Web en visitant une page qui utilise l'info-bulle, j'obtiens une erreur:

react-dom.development.js:88 Warning: Prop `dangerouslySetInnerHTML` did not match.

Les classes CSS sont différentes sur le client et sur le serveur

La partie étrange est que je n'obtiens pas cette erreur lors de la navigation d'une page aléatoire à une page qui utilise l'info-bulle de réaction.

Le code associé à l'info-bulle:

<StyledPopularityTooltipIcon src="/icons/tooltip.svg" alt="question mark" data-tip="hello world" />
<ReactTooltip
    effect="solid"
    className="tooltip"
    backgroundColor="#F0F0F0"
    arrowColor="#F0F0F0"
    clickable={true}
/>

Answer 1

J'ai eu le même problème, j'ai dû utiliser state pour détecter le moment où le composant a été monté et n'afficher l'info-bulle qu'après cela.

PS Vous ne voyez pas l'erreur lors de la navigation, car la page n'est pas rendue sur le serveur lorsque vous naviguez, tout est en front-end :)