domNode instanceof Element is suddenly false?

[Jahrhause]

Expected Behavior

domNode instanceof Element should be true

Actual Behavior

domNode instanceof Element is false

Steps to Reproduce

After upgrading from version 1.4 to 3.0 domNode instanceof Element is suddenly returning false

Reproducible Demo

import parse, { HTMLReactParserOptions, domToReact, Element, DOMNode } from 'html-react-parser';
import React, { FC } from 'react';

const Textblock: FC = () => {
  const htmlFromCMS = '<h1>Weird</h1><p>dsdsdsdsdsd</p>';

  const options: HTMLReactParserOptions = {
    trim: true,
    replace: (domNode) => {
      console.log(domNode instanceof Element);
      console.log('/******************************************************************/');
      if (domNode instanceof Element && domNode.attribs && domNode.type === 'tag') {
        switch (domNode.name) {
          case 'h1':
            return (
              <h1 className="sydb-textblock__heading sydb-textblock__heading--h1">
                {domToReact(domNode.children, options)}
              </h1>
            );
          case 'h2':
            return (
              <h2 className="sydb-textblock__heading sydb-textblock__heading--h2">
                {domToReact(domNode.children, options)}
              </h2>
            );
          case 'p':
            return (
              <p className="test">
                {domToReact(domNode.children, options)}
              </p>
            );          
          
        }
      }
    },
  };
    return (
      <article>
        {parse(htmlFromCMS, options)}
      </article>
    );
};

export default Textblock;

What could have happend?

Environment

• Version: 3.0.1
• Platform: Next.js
• Browser: Chrome

[remarkablemark]

It should still work as expected. See CodeSandbox.

Try reinstalling your packages:

rm -rf node_modules
npm i

[jlegreid]

@Jahrhause @remarkablemark I am also having this issue, I have tried reinstalling my packages and it didn't seem to help. For now I have just replaced my domNode instanceof Element checks with domNode.type === 'tag' and that achieves the same result for my purposes at this time.

[remarkablemark]

Thanks for the heads up @jlegreid and sharing your workaround. I'll keep an eye out if more users are experiencing this.

[tremby]

I'm seeing the same thing.

[Jahrhause]

Just tried to downgrade to version 2.0.0 and now everything is back to the way it should be, so must be something in version 3.

For v.3 I used this workaround as of now:

const options: HTMLReactParserOptions = {
    trim: true,
    replace: (domNode) => {
      let element = domNode as Element;

      if (element.attribs && element.type === 'tag') {
        switch (element.name) {
          case 'h1':
            return (
              <h1 className="sydb-textblock__heading sydb-textblock__heading--h1">
                {domToReact(element.children, options)}
              </h1>
            );
          case 'h2':
            return (
              <h2 className="sydb-textblock__heading sydb-textblock__heading--h2">
                {domToReact(element.children, options)}
              </h2>
            );
          case 'p':
            return (
              <p className="test">
                {domToReact(element.children, options)}
              </p>
            );          
        }
      }
    },
  };

This way I still get the typings I need.

[remarkablemark]

Thanks for the updates everyone. Could I ask someone to try regenerating their lockfile as well as nuking node_modules?

rm -rf node_modules package-lock.json
npm i

Let me know if the error still persists if you try that.

[tremby]

@Jahrhause

For v.3 I used this workaround as of now:
...
This way I still get the typings I need.

A bit better, imo, is to use a type predicate:

Define a function like

function domNodeIsElement(domNode: DOMNode): domNode is Element {
  return domNode.type === "tag";
}

Then, as for usage, as soon as you've done

 if (!domNodeIsElement(domNode)) return;

any code after that knows that domNode is an Element.

[tremby]

@remarkablemark I would but I've just set off travelling for a week. Hopefully someone else can test that in the mean time.

[remarkablemark]

Sounds good @tremby

[TheRarita]

Not sure if this is related, but I am getting when using code from readme about typescript - https://github.com/remarkablemark/html-react-parser#replace-with-typescript

Property 'attribs' does not exist on type 'DOMNode & Element'.  
Property 'attribs' does not exist on type 'Comment & Element'.ts(2339)

https://codesandbox.io/s/kk0ovr?file=/src/App.tsx:252-259

[remarkablemark]

@TheRarita I think your CodeSandbox link is incorrect?

[TheRarita]

@remarkablemark Sorry, and double sorry. I corrected the link and also realized where my mistake was. I did not realize that Element should be imported from this library and it is not the general base Element. The name is a bit confusing but also, I did not read it properly since it is clearly imported in the snipped I linked.

[remarkablemark]

No worries @TheRarita. Thanks for the update.