react-tooltip SSR warning #166
Description
Navigating to the playground directly (i.e., not clicking a link from the resource or policy overviews) will cause an error to be logged in the dev console:
react-dom.development.js?61bb:67 Warning: Prop `dangerouslySetInnerHTML` did not match. Server: "\n \t.tcbf5bad8-29e5-4958-8d45-48464a7d4015 {\n\t color: #fff;\n\t background: #222;\n\t border: 1px solid transparent;\n \t}\n\n \t.tcbf5bad8-29e5-4958-8d45-48464a7d4015.place-top {\n margin-top: -10px;\n }\n .tcbf5bad8-29e5-4958-8d45-48464a7d4015.place-top::before {\n border-top: 8px solid transparent;\n }\n .tcbf5bad8-29e5-4958-8d45-48464a7d4015.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 .tcbf5bad8-29e5-4958-8d45-48464a7d4015.place-bottom {\n margin-top: 10px;\n }\n .tcbf5bad8-29e5-4958-8d45-48464a7d4015.place-bottom::before {\n border-bottom: 8px solid transparent;\n }\n .tcbf5bad8-29e5-4958-8d45-48464a7d4015.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 .tcbf5bad8-29e5-4958-8d45-48464a7d4015.place-left {\n margin-left: -10px;\n }\n .tcbf5bad8-29e5-4958-8d45-48464a7d4015.place-left::before {\n border-left: 8px solid transparent;\n }\n .tcbf5bad8-29e5-4958-8d45-48464a7d4015.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 .tcbf5bad8-29e5-4958-8d45-48464a7d4015.place-right {\n margin-left: 10px;\n }\n .tcbf5bad8-29e5-4958-8d45-48464a7d4015.place-right::before {\n border-right: 8px solid transparent;\n }\n .tcbf5bad8-29e5-4958-8d45-48464a7d4015.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.t55ac864f-61e4-4d2e-a98f-83527bc392a1 {\n\t color: #fff;\n\t background: #222;\n\t border: 1px solid transparent;\n \t}\n\n \t.t55ac864f-61e4-4d2e-a98f-83527bc392a1.place-top {\n margin-top: -10px;\n }\n .t55ac864f-61e4-4d2e-a98f-83527bc392a1.place-top::before {\n border-top: 8px solid transparent;\n }\n .t55ac864f-61e4-4d2e-a98f-83527bc392a1.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 .t55ac864f-61e4-4d2e-a98f-83527bc392a1.place-bottom {\n margin-top: 10px;\n }\n .t55ac864f-61e4-4d2e-a98f-83527bc392a1.place-bottom::before {\n border-bottom: 8px solid transparent;\n }\n .t55ac864f-61e4-4d2e-a98f-83527bc392a1.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 .t55ac864f-61e4-4d2e-a98f-83527bc392a1.place-left {\n margin-left: -10px;\n }\n .t55ac864f-61e4-4d2e-a98f-83527bc392a1.place-left::before {\n border-left: 8px solid transparent;\n }\n .t55ac864f-61e4-4d2e-a98f-83527bc392a1.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 .t55ac864f-61e4-4d2e-a98f-83527bc392a1.place-right {\n margin-left: 10px;\n }\n .t55ac864f-61e4-4d2e-a98f-83527bc392a1.place-right::before {\n border-right: 8px solid transparent;\n }\n .t55ac864f-61e4-4d2e-a98f-83527bc392a1.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 "
at style
at div
at ReactTooltip (webpack-internal:///./node_modules/react-tooltip/dist/index.es.js:1928:5)
at Button (webpack-internal:///./components/Button.js:53:23)
at PolicySearchAndResults (webpack-internal:///./components/playground/PolicySearchAndResults.js:67:24)
at div
at div
at SelectedPolicy (webpack-internal:///./components/playground/SelectedPolicy.js:52:22)
at div
at div
at PolicyPlayground (webpack-internal:///./pages/playground.js:67:83)
at ErrorBoundary (webpack-internal:///./components/ErrorBoundary.js:59:167)
at WithRouterWrapper (webpack-internal:///./node_modules/next/dist/client/with-router.js:15:37)
at main
at PageLayout (webpack-internal:///./components/layout/PageLayout.js:58:19)
at AppStateProvider (webpack-internal:///./providers/appState.js:59:20)
at ThemeProvider (webpack-internal:///./providers/theme.js:65:70)
at MyApp (webpack-internal:///./pages/_app.js:50:24)
at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:152:5)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:641:24)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:772:24)
See:
https://stackoverflow.com/questions/64079321/react-tooltip-and-next-js-ssr-issue
https://github.com/wwayne/react-tooltip/issues/675