Failed to import - html-dom-parser

[MariusVatasoiu]

Failing module

• GitHub: https://github.com/remarkablemark/html-dom-parser
• npm: https://www.npmjs.com/package/html-dom-parser

import HTMLDOMParser from 'https://esm.sh/[email protected]/';

HTMLDOMParser('<p>Hello, World!</p>');

Error message

After onload I got this:

utilities.js:85 Uncaught TypeError: Element is not a constructor
    at formatDOM (utilities.js:85:28)
    at HTMLDOMParser2 (html-to-dom.js:34:8)

Additional info

• esm.sh version: v113
• Browser version: Chrome 111.0.5563.147 (but the error is present in any browser/version)

In investigated this issue and the problem seems to be how require() vs import/export works.

In domhandler/lib/esm/index.js we have:

import { ElementType } from "domelementtype";
import { Element, Text, Comment, CDATA, Document, ProcessingInstruction, } from "./node.js";
export * from "./node.js";
// Default options
const defaultOpts = {
    withStartIndices: false,
    withEndIndices: false,
    xmlMode: false,
};
export class DomHandler {...}

And in html-dom-parser/lib/client/utilities.js we have:

var domhandler = require('domhandler');
var constants = require('./constants');

var CASE_SENSITIVE_TAG_NAMES = constants.CASE_SENSITIVE_TAG_NAMES;

var Comment = domhandler.Comment;
var Element = domhandler.Element;
...
current = new Element(tagName, formatAttributes(node.attributes));
...

Cause / Solution

In html-dom-parser/lib/client/utilities.js var domhandler = require('domhandler'); acts like import domhandler from 'domhandler';, but it should act like import * as domhandler from 'domhandler';.

I don't have experience with how esm.sh transpiles the code from CJS to ES6, but this was my solution after I manually changed html-dom-parser/lib/client/utilities.js to ES6 and used import * as domhandler from 'domhandler'.

[ije]

thanks for the details...transplie cjs to esm is so hard cause edge cases... anyway i will fix it with your resolution

[MariusVatasoiu]

The edge case here I think is this line:

export * from "./node.js";

When this is present, require() acts like an import * as foo.

If this is not present, it will act like an import foo.

I didn't completely test my supposition, but this was how it looked from my tests.