React-tooltip: Page Load Error with NextJS + react-simple-maps?

[bonbonio]

Hello,

This tooltip works great, and I love it, I have it working to shade in countries meeting a criteria, but I get the following issue when the page loads, and sometimes the tooltip losing as its styling; this is the bit of the error that seems relevant.

How can I resolve this console error?

index.js:1 Warning: Prop `dangerouslySetInnerHTML` did not match. Server: "\n \t.t51fe1a30-9bf2-44ad-a27d-331c9a5e9a33 {\n\t color: #fff;\n\t background: #222;\n\t border: 1px solid transparent;\n \t}\n\n \t.t51fe1a30-9bf2-44ad-a27d-331c9a5e9a33.place-top {\n margin-top: -10px;\n }\n .t51fe1a30-9bf2-44ad-a27d-331c9a5e9a33.place-top::before {\n border-top: 8px solid transparent;\n }\n .t51fe1a30-9bf2-44ad-a27d-331c9a5e9a33.place-top::after {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n bottom: -6px;\n left: 50%;\n margin-left: -8px;\n border-top-color: #222;\n border-top-style: solid;\n border-top-width: 6px;\n }\n\n .t51fe1a30-9bf2-44ad-a27d-331c9a5e9a33.place-bottom {\n margin-top: 10px;\n }\n .t51fe1a30-9bf2-44ad-a27d-331c9a5e9a33.place-bottom::before {\n border-bottom: 8px solid transparent;\n }\n .t51fe1a30-9bf2-44ad-a27d-331c9a5e9a33.place-bottom::after {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n top: -6px;\n left: 50%;\n margin-left: -8px;\n border-bottom-color: #222;\n border-bottom-style: solid;\n border-bottom-width: 6px;\n }\n\n .t51fe1a30-9bf2-44ad-a27d-331c9a5e9a33.place-left {\n margin-left: -10px;\n }\n .t51fe1a30-9bf2-44ad-a27d-331c9a5e9a33.place-left::before {\n border-left: 8px solid transparent;\n }\n .t51fe1a30-9bf2-44ad-a27d-331c9a5e9a33.place-left::after {\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n right: -6px;\n top: 50%;\n margin-top: -4px;\n border-left-color: #222;\n border-left-style: solid;\n border-left-width: 6px;\n }\n\n .t51fe1a30-9bf2-44ad-a27d-331c9a5e9a33.place-right {\n margin-left: 10px;\n }\n .t51fe1a30-9bf2-44ad-a27d-331c9a5e9a33.place-right::before {\n border-right: 8px solid transparent;\n }\n .t51fe1a30-9bf2-44ad-a27d-331c9a5e9a33.place-right::after {\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n left: -6px;\n top: 50%;\n margin-top: -4px;\n border-right-color: #222;\n border-right-style: solid;\n border-right-width: 6px;\n }\n " Client: "\n \t.t6d4140a3-b207-4e70-8cca-53761fb541be {\n\t color: #fff;\n\t background: #222;\n\t border: 1px solid transparent;\n \t}\n\n \t.t6d4140a3-b207-4e70-8cca-53761fb541be.place-top {\n margin-top: -10px;\n }\n .t6d4140a3-b207-4e70-8cca-53761fb541be.place-top::before {\n border-top: 8px solid transparent;\n }\n .t6d4140a3-b207-4e70-8cca-53761fb541be.place-top::after {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n bottom: -6px;\n left: 50%;\n margin-left: -8px;\n border-top-color: #222;\n border-top-style: solid;\n border-top-width: 6px;\n }\n\n .t6d4140a3-b207-4e70-8cca-53761fb541be.place-bottom {\n margin-top: 10px;\n }\n .t6d4140a3-b207-4e70-8cca-53761fb541be.place-bottom::before {\n border-bottom: 8px solid transparent;\n }\n .t6d4140a3-b207-4e70-8cca-53761fb541be.place-bottom::after {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n top: -6px;\n left: 50%;\n margin-left: -8px;\n border-bottom-color: #222;\n border-bottom-style: solid;\n border-bottom-width: 6px;\n }\n\n .t6d4140a3-b207-4e70-8cca-53761fb541be.place-left {\n margin-left: -10px;\n }\n .t6d4140a3-b207-4e70-8cca-53761fb541be.place-left::before {\n border-left: 8px solid transparent;\n }\n .t6d4140a3-b207-4e70-8cca-53761fb541be.place-left::after {\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n right: -6px;\n top: 50%;\n margin-top: -4px;\n border-left-color: #222;\n border-left-style: solid;\n border-left-width: 6px;\n }\n\n .t6d4140a3-b207-4e70-8cca-53761fb541be.place-right {\n margin-left: 10px;\n }\n .t6d4140a3-b207-4e70-8cca-53761fb541be.place-right::before {\n border-right: 8px solid transparent;\n }\n .t6d4140a3-b207-4e70-8cca-53761fb541be.place-right::after {\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n left: -6px;\n top: 50%;\n margin-top: -4px;\n border-right-color: #222;\n border-right-style: solid;\n border-right-width: 6px;\n }\n " in style (created by ReactTooltip) in div (created by ReactTooltip)

[damianhodgkiss]

The same thing with next, resolved the error by passing a static UUID but still no styling.

Edit: needed to use a non-numeric UUID as the class name generated matches the UUID which cant be a number. Something like this works in Next.

<ReactTooltip effect="solid" uuid="mytt" />

[dvcrn]

In my messing around with this issue I noticed it only happens when the component is being rendered on the server-server. Using some tricks to make sure it's client-only resolved it for me, in combination with @damianhodgkiss answer

[Garlink]

For those who are interested in solving this on Next.js (10.0.6), take a look at THIS.

In this case, I solved that warning and also the issues with tooltip position by including on _app.js like so:
const ReactTooltip = dynamic(() => import('react-tooltip'), { ssr: false });

Then, just:
<ReactTooltip />

So, no need to setting up uuid.

Not sure if is the best approach, but at least it's solved for now.

[SivaramPg]

For those who are interested in solving this on Next.js (10.0.6), take a look at THIS.

In this case, I solved that warning and also the issues with tooltip position by including on _app.js like so:
const ReactTooltip = dynamic(() => import('react-tooltip'), { ssr: false });

Then, just:
<ReactTooltip />

So, no need to setting up uuid.

Not sure if is the best approach, but at least it's solved for now.

Thanks for this !