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

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.

[kszitt]

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

[sagar-gavhane]

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

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