React-tooltip: Warning: Expected server HTML to contain a matching <style> in <div>

Created on 27 May 2020 · 3Comments · Source: wwayne/react-tooltip

Hi,

I'm using next.js and SSR.

I'm rendering ReactTooltip comp only on client side with the following code:

    let tooltipComp = null;
    if (isRunningOnClient()) {
        tooltipComp = <ReactTooltip />
    }

But only on dev mode i'm getting this warning:
Warning: Expected server HTML to contain a matching <style> in <div>.

What is the cause and the solution? thanks

Source

oran1248

👍1

Most helpful comment

After some research, I've discovered that conditionally rendering something on the server will always raise this error. Here's a simple example that will raise this warning:

<If condition={canUseDOM}>
  <label>This will throw a warning!</label>
</If>

Originally I thought I could use suppressHydrationWarning to stop this warning, but it turns out that suppressHydrationWarning only suppresses warnings for mismatches in content, not entire missing nodes. Unfortunately, this library needs some major work in order to be SSR friendly. The HTML always gets sent back from the server, and I'm guessing it's because of dangerouslySetInnerHtml.

If you need SSR functionality I'd suggest rolling your own tooltip library, as this library isn't too SSR friendly. You could also just ignore the warning, but it does clutter up the console and opens you up to the possibility of rerenders.

divmgl on 6 Jul 2020

👍5

All 3 comments

After some research, I've discovered that conditionally rendering something on the server will always raise this error. Here's a simple example that will raise this warning:

<If condition={canUseDOM}>
  <label>This will throw a warning!</label>
</If>

divmgl on 6 Jul 2020

👍5

We would welcome a PR, if you would like to fix this behavior!

On Sun, Jul 5, 2020 at 8:40 PM Dexter Miguel notifications@github.com
wrote:

After dealing with this myself and reading through the source code, there
is no actual way of achieving this currently. This is because of the way
Wrapper is implemented. It's using dangerouslySetInnerHtml, which causes
the client to expect to receive a div from the server.

One of the easiest ways to overcome this is to allow Wrapper to be any
kind of node. Unfortunately, this library currently only supports div and
span, for some reason, and if it doesn't find either of those in the
Wrapper prop, it will fallback to div. I'm going to be forking and making
this change, because I don't really see why it should work this way.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/wwayne/react-tooltip/issues/601#issuecomment-653962228,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AEX6THNYYKAVDJHSMTXTIULR2EMQZANCNFSM4NLZMO2Q
.