Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Bug: hydrating fails with nested paragraph and dangerouslySetInnerHTML
See original GitHub issueReact version: 16.13.1
Steps To Reproduce
- Use the
dangerouslySetInnerHTMLon apelement where the__htmlcontains a<p>tag - Server-side render this component and try to hydrate
Link to code example:
<!doctype html>
<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
<!-- Pretend for an instance that this html was generated on the server by ReactDOM.renderToString() -->
<div id="app"><p><p>Dope!</p></p></div>
</body>
<script>
function Component() {
return React.createElement("p", {
dangerouslySetInnerHTML: { __html: "<p>Dope!</p>" },
})
}
const component = React.createElement(Component)
const root = document.getElementById("app")
ReactDOM.hydrate(component, root)
</script>
</html>
JSFiddles:
- This one breaks because it has nesting
p: https://jsfiddle.net/mw19p0g3/ - This one works because the wrapper is
divinstead ofp: https://jsfiddle.net/mw19p0g3/2/ - This one works too because there no nesting
pin the html: https://jsfiddle.net/mw19p0g3/3/
The current behaviour
The ReactDOM.hydrate throws a cryptic error:
Warning: Prop `dangerouslySetInnerHTML` did not match. Server: "" Client: "<p>Dope!</p>"
Note the missing Server: "" string.
The expected behavior
Do not throw an error and just hydrate the component as expected.
I realise that nesting p elements does not conform to the HTML spec for the p element.
If React chooses not to support the use case of nesting p tags through dangerouslySetInnerHTML, that’s understandable.
In that case the error should be more descriptive and there should probably also be an error or warning while performing the server side render.
It should also be documenting somewhere that will easily show up in Google.
The current behaviour is very confusing and it took me a while to track down what was going on.
Issue Analytics
- State:
- Created 3 years ago
- Comments:7
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Your issue may be because your
__htmltop most element is a<p>tag, and you are usingdangerouslySetInnerHTMLon a<p>tag.I also ran into this issue, and found that using a outermost
<span>tag fixes the issue.I have faced the same issue when I am using
dangerouslySetInnerHTMLon a<p>tag.The fix was to use it on a
<div>instead.In my case, I am using ChakraUI and the
dangerouslySetInnerHTMLwas on a<Text dangerouslySetInnerHTML ...>; I replaced the<Text>with<Box dangerouslySetInnerHTML ...>the issue disappeared!The reason, is hydration won’t be possible if there is a
<div>inside a<p>and since your content coming for an outside source, it might contain a<div>and that is not a valid HTML 😃Hope that helps @romeovs @Limnades