Description
Description:
I was using html-react-parser with React 18 and ReactDOM.render, and it worked fine when parsing full HTML strings. However, after upgrading to React 19 and switching to the new createRoot API, the parse method is no longer working correctly when I pass the entire HTML (including <html>, <head>, and <body> tags), not just the content inside the <body>.
Steps to Reproduce:
React 18 + ReactDOM.render + html-react-parser parsing full HTML string — works fine.
React 19 + createRoot + html-react-parser parsing the same full HTML string — does not work as expected.
Expected Behavior:
The parser should work the same way regardless of React version or rendering method, correctly parsing full HTML strings.
Actual Behavior:
Parsing full HTML with createRoot in React 19 fails or behaves unexpectedly.
Additional Info:
I have working examples on Stackblitz showing both scenarios. Here are the links:
React 18 + ReactDOM.render example: https://stackblitz.com/edit/react-ts-frs8wqq8?file=index.tsx
React 19 + createRoot example: https://stackblitz.com/edit/react-lqgcckqo?file=src%2Findex.js
Could you please check if this is a compatibility issue with React 19’s createRoot or if there is a recommended workaround?
Metadata
Metadata
Assignees
Projects
Milestone
Relationships
Development
Participants
Activity
remarkablemark commentedon May 27, 2025
@Nimit012 I believe this is an expected error in React 19. If you check the Console, you will see the error:
Can you update the StackBlitz link for the React 18 example?
Nimit012 commentedon May 28, 2025
@remarkablemark react 18 example updated, it is working fine here.
remarkablemark commentedon May 28, 2025
@Nimit012 thanks it looks like the React 18 allowed for rendering
<html>inside of a<div>(which is technically invalid):My recommendation if you want to use React 19 is to render only the children of
<body>or use an<iframe>.