Page Load Error with NextJS + react-simple-maps?

[bnbon]

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 !

[sgehrman]

I'm using TS and NextJS,

const ReactTooltip = dynamic(() => import('react-tooltip'), { ssr: false });

That doesn't work. Getting error. "import() expresssions are not supported yet"