React-tooltip e Next.js SSR issue

Question

Eu uso a biblioteca react-tooltip em meu aplicativo Next.js.

Percebi que sempre que atualizo um site ao visitar uma página que usa a dica, recebo um erro:

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

As classes CSS são diferentes no cliente e no servidor

A parte estranha é que não recebo esse erro ao navegar de uma página aleatória para uma página que usa a dica de ferramenta react.

O código relacionado à dica de ferramenta:

<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

Eu tive o mesmo problema, tive que usar o estado para detectar quando o componente foi montado e mostrar a dica de ferramenta somente depois disso.

PS Você não vê o erro ao navegar, porque a página não é renderizada no servidor quando você navega, é tudo front-end :)