), as documented in the README and as it worked in 6.0.0:
import parse, { Element } from 'html-react-parser'; parse('<a href="#">link</a>', { replace: (domNode) => { console.log(domNode instanceof Element); // true ✅ }, });
Actual Behavior
domNode instanceof Element returns false for all nodes in v6.0.1, even though domNode.constructor.name is "Element".
The Element class re-exported by html-react-parser is a different class reference than the Element used internally by the parser to construct DOM nodes:
import parse, { Element } from 'html-react-parser'; parse('<a href="#">link</a>', { replace: (domNode) => { console.log(domNode.constructor.name); // "Element" console.log(domNode instanceof Element); // false ❌ console.log(domNode.constructor === Element); // false ❌ }, });
This silently breaks every replace callback that follows the recommended instanceof Element pattern. No replacements occur, causing UI regressions in applications that rely on replace to transform HTML elements into custom React components.
Steps to Reproduce
,
`import parse, { Element } from 'html-react-parser';
const html = '
Hello world
';
const result = parse(html, {
replace: (domNode) => {
if (domNode instanceof Element) {
// This block is NEVER reached in 6.0.1
console.log('Matched:', domNode.name);
}
},
});`
Reproducible Demo
Workaround: Use duck-type checking instead of instanceof:
`import parse, { type DOMNode, type Element } from 'html-react-parser';
const isElement = (node: DOMNode): node is Element =>
node.type === 'tag' && 'name' in node && 'attribs' in node;
parse(html, {
replace: (domNode) => {
if (!isElement(domNode)) return;
// domNode is now correctly narrowed to Element
console.log(domNode.name, domNode.attribs);
},
});`
Environment
- Version: html-react-parser@6.0.1 (works correctly in 6.0.0)
- Platform: Node.js v22.21.1
- Browser: Chrome (latest)
- OS: macOS
Keywords
instanceof, Element, replace, domNode, regression, 6.0.1, class mismatch, domhandler, type guard
Expected Behavior
When using the replace callback, domNode instanceof Element should return true for element nodes (e.g., ,
6.0.0:import parse, { Element } from 'html-react-parser'; parse('<a href="#">link</a>', { replace: (domNode) => { console.log(domNode instanceof Element); // true ✅ }, });Actual Behavior
domNode instanceof Element returns false for all nodes in v6.0.1, even though domNode.constructor.name is "Element".
The Element class re-exported by html-react-parser is a different class reference than the Element used internally by the parser to construct DOM nodes:
import parse, { Element } from 'html-react-parser'; parse('<a href="#">link</a>', { replace: (domNode) => { console.log(domNode.constructor.name); // "Element" console.log(domNode instanceof Element); // false ❌ console.log(domNode.constructor === Element); // false ❌ }, });This silently breaks every replace callback that follows the recommended instanceof Element pattern. No replacements occur, causing UI regressions in applications that rely on replace to transform HTML elements into custom React components.
Steps to Reproduce
1.Install html-react-parser@6.0.1
2.Import parse and Element from html-react-parser
3.Use domNode instanceof Element inside a replace callback
4.Observe it returns false for every node, including element nodes like ,
`import parse, { Element } from 'html-react-parser';
const html = '
Hello world
';const result = parse(html, {
replace: (domNode) => {
if (domNode instanceof Element) {
// This block is NEVER reached in 6.0.1
console.log('Matched:', domNode.name);
}
},
});`
Reproducible Demo
Workaround: Use duck-type checking instead of instanceof:
`import parse, { type DOMNode, type Element } from 'html-react-parser';
const isElement = (node: DOMNode): node is Element =>
node.type === 'tag' && 'name' in node && 'attribs' in node;
parse(html, {
replace: (domNode) => {
if (!isElement(domNode)) return;
// domNode is now correctly narrowed to Element
console.log(domNode.name, domNode.attribs);
},
});`
Environment
Keywords
instanceof, Element, replace, domNode, regression, 6.0.1, class mismatch, domhandler, type guard