react-tooltip
react-tooltip copied to clipboard
Page Load Error with NextJS + react-simple-maps?
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)
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" />
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
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.
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 !
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"