Problema de React-tooltip y Next.js SSR
Sep 27 2020
Utilizo la biblioteca react-tooltip en mi aplicación Next.js.
Noté que cada vez que actualizo un sitio web mientras visito una página que usa la información sobre herramientas, aparece un error:
react-dom.development.js:88 Warning: Prop `dangerouslySetInnerHTML` did not match.
Las clases de CSS son diferentes en el cliente y en el servidor
La parte extraña es que no obtengo ese error al navegar desde una página aleatoria a una página que usa la información sobre herramientas de reacción.
El código relacionado con la información sobre herramientas:
<StyledPopularityTooltipIcon src="/icons/tooltip.svg" alt="question mark" data-tip="hello world" />
<ReactTooltip
effect="solid"
className="tooltip"
backgroundColor="#F0F0F0"
arrowColor="#F0F0F0"
clickable={true}
/>
Respuestas
1 lemurry Oct 15 2020 at 02:17
Tuve el mismo problema, tuve que usar el estado para detectar cuándo se montó el componente y mostrar la información sobre herramientas solo después de eso.
PD: no ve el error al navegar, porque la página no se representa en el servidor cuando navega, todo es front-end :)