Closed badpenguin closed 5 years ago
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.
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.
Hi, it appears to be due to the
s.parentNode.insertBefore
logic. The mismatch appears to go away after changing it to useappendChild
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!
This article helps to figure out why it's throwing this issue.
https://flaviocopes.com/react-fix-dangerouslysetinnerhtml-did-not-match/
<p dangerouslySetInnerHTML={{__html: item.content}}/>
change to
<div dangerouslySetInnerHTML={{__html: item.content}}/>
.
the problem is solved
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
Bug report
Describe the bug
Only in development mode with version 8 i got this strange message in console log:
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.