Browser error when using "import { Comment, Node, ProcessingInstruction, Text } from 'html-react-parser'".

[GrowUp-Haruno]

An error occurred in the browser when executing the following code. This does not occur in VSCode.

// /src/App.tsx
import parth, { Comment, Element, Node, ProcessingInstruction, Text } from 'html-react-parser';

function App() {
  parth(`<p>string</p>`, {
    replace: (domNode) => {
      if (domNode instanceof Element) {
        console.log(domNode);
      } else if (domNode instanceof Comment) {
        console.log(domNode);
      } else if (domNode instanceof ProcessingInstruction) {
        console.log(domNode);
      } else if (domNode instanceof Text) {
        console.log(domNode.data);
      } else if (domNode instanceof Node) {
        console.log(domNode);
      }
    },
  });

  return (....);
}

The following is the error message.

Compiled with problems:X
ERROR in ./src/App.tsx 17:36-43
export 'Comment' (imported as 'Comment') was not found in 'html-react-parser' (possible exports: Element, attributesToProps, default, domToReact, htmlToDOM)
ERROR in ./src/App.tsx 19:36-57
export 'ProcessingInstruction' (imported as 'ProcessingInstruction') was not found in 'html-react-parser' (possible exports: Element, attributesToProps, default, domToReact, htmlToDOM)
ERROR in ./src/App.tsx 21:36-40
export 'Text' (imported as 'Text') was not found in 'html-react-parser' (possible exports: Element, attributesToProps, default, domToReact, htmlToDOM)
ERROR in ./src/App.tsx 23:36-40
export 'Node' (imported as 'Node') was not found in 'html-react-parser' (possible exports: Element, attributesToProps, default, domToReact, htmlToDOM)

It seems that an error is occurring for all elements except for "Element".

When I call the "domhandler" directly, which imports and exports in 'html-react-parser', it works fine.

- import parth, { Comment, Element, Node, ProcessingInstruction, Text } from 'html-react-parser';
+ import parth,{Element} from 'html-react-parser';
+ import { Comment, Node, ProcessingInstruction, Text } from 'domhandler';

The reproduction environment is:

yarn create react-app my-app --template typescript
cd ./my-app
yarn add html-react-parser

[remarkablemark]

Can you provide a reproducible example via CodeSandbox or a GitHub repository?

[GrowUp-Haruno]

GitHub repository is here. This one gives the same error.

[remarkablemark]

Thanks for sharing the reproducible example.

What you're seeing is expected behavior because only Element is exported as a value and Comment, Node, ProcessingInstruction, Text are TypeScript types and you cannot do instanceof with a type.

[GrowUp-Haruno]

Thank you.

Just to confirm, is the "instanceof" working as expected in the following import?

import parth,{Element} from 'html-react-parser';
import { Comment, Node, ProcessingInstruction, Text } from 'domhandler';

[remarkablemark]

Yes I believe so.

[Dremora]

It seems there's a misalignment between index.d.ts, index.js and index.mjs:

• index.d.ts, besides types, lists attributesToProps, domToReact, htmlToDOM, Comment, Element, Node, ProcessingInstruction and Text as non-default exports
• index.js exports domToReact, htmlToDOM, attributesToProps and Element
• index.mjs has the same 4 exports as above

[remarkablemark]

The exports from domhandler are TypeScript types

[Dremora]

They are classes, not types, see Text for example. instanceof wouldn't work with a type.

[remarkablemark]

You're correct. The only exported class from domhandler is Element. The rest are not exported.

[remarkablemark]

Closing issue due to lack of activity. Feel free to reopen if you have additional questions.