Next.js: v8 dev mode: Warning: Prop `dangerouslySetInnerHTML` did not match. Server

[badpenguin]

Bug report

Describe the bug

Only in development mode with version 8 i got this strange message in console log:

index.js:1 Warning: Prop dangerouslySetInnerHTML did not match. Server: "" Client: "\nvar WebFontConfig = {\n\tgoogle: {families: [ 'Fjalla+One|Open+Sans:400,500,700' ]}\n};\n(function() {\n\tvar wf = document.createElement('script');\n\twf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';\n\twf.type = 'text/javascript';\n\twf.async = 'true';\n\tvar s = document.getElementsByTagName('script')[0];\n\ts.parentNode.insertBefore(wf, s);\n})();\n\t\t\t"

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1) git clone -b v8.1.0 https://github.com/badpenguin/nextjs-static-generator-boilerplate.git
2) yarn install
3) yarn run dev
4) navigate to http://localhost:3000/credits

Additional context

The script tag with dangerous html generating the message is here:
https://github.com/badpenguin/nextjs-static-generator-boilerplate/blob/v8.1.0/src/lib/NextGoogleFont.tsx its the one where i use vanillaJS to load webfonts.

[mediplex]

I'm running into the same issue.
It looks like that dangerouslySetInnerHTML accepts only some basic tag like span, strong, del, em...
The code works properly on the client side when I hot reload the code but once I reload the page the render breaks.

[ijjk]

Hi, it appears to be due to the s.parentNode.insertBefore logic. The mismatch appears to go away after changing it to use appendChild instead. For example:

var WebFontConfig = {
    google: {families: [ '${props.face}' ]}
};
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    document.querySelector('head').appendChild(wf)
})();

Closing as this doesn't appear to be a Next.js issue. If you are still having trouble feel free to reply with additional details.

[badpenguin]

Hi, it appears to be due to the s.parentNode.insertBefore logic. The mismatch appears to go away after changing it to use appendChild instead. For example:

Thanks so much for your time. I was focusing too much on the fact that this was working on v7 and in v8+prod that i didn't even thinked to try to change the logic :) Thank you!

[sagar-gavhane]

This article helps to figure out why it's throwing this issue.

https://flaviocopes.com/react-fix-dangerouslysetinnerhtml-did-not-match/

[kszitt]

<p dangerouslySetInnerHTML={{__html: item.content}}/>
change to
<div dangerouslySetInnerHTML={{__html: item.content}}/>.
the problem is solved