Skip to content

instanceof Element broken in v6.0.1 — exported Element class differs from internal parser Element #2198

@a-sharma-goodyear

Description

@a-sharma-goodyear

Expected Behavior

When using the replace callback, domNode instanceof Element should return true for element nodes (e.g., ,

, ), 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

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

  • 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

Metadata

Metadata

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions