xmldom can not be imported from ES modules

[amitdhiman000]

"@xmldom/xmldom": "0.7.4"

Not able to import the modules with web test runner.

SyntaxError: The requested module './node_modules/@xmldom/xmldom/lib/index.js' does not provide an export named 'DOMParser'

facing same issue with older versions as well.

[karfau]

@amitdhiman000 can you point to something that is available publicly where it is not working?

Or provide more detail how to reproduce it? I'm not aware of the details regarding web test runner.

If you are able to you could even create a branch/PR that adds a github action check which is failing and we can see what we can do about it.

[amitdhiman000]

@karfau

Code is not available in public domain, it is a private git repo in my organisation.

Here is sample project to demonstrate the issue repo link
npm install
npm run test

[karfau]

Thank you, I have tried it and followed the documentation a bit.
As far as I understand currently, the issue is that xmldom is only providing CommonJS Modules

Can you check if one of the options listed there work for you?

Since I don't have a lot of experience on that level (and I'm not sure one of the other maintainers has), we might need help to provide other formats and we need to discuss what we want/need to support. In this regard it is also linked to #76

[amitdhiman000]

@karfau

Thanks for your suggestions.
I dig little bit deeper and found the solution for the problem.
I used the commonjs plugin, to load @xmldom/xmldom package.

web-test-runner-config.js

import rollupCommonjs  from '@rollup/plugin-commonjs';
import { fromRollup } from '@web/dev-server-rollup';

const commonjs = fromRollup(rollupCommonjs);

export default {
    nodeResolve: true,
    plugins: [
        commonjs({
            include: ["**/node_modules/@xmldom/xmldom/lib/*.js"]
        })
    ]
};

[karfau]

Based on my current understanding we should be able to make xmldom available for the ES module world by generating an es module for each commonjs module.
I followed the "rollup track" and it looks like https://github.com/eight04/cjs-es is an option for that.

Before implementing what seems to be the most common use case on our side I filed eight04/cjs-es#27

There are also other tools that have a cli:

• https://github.com/getify/moduloze (supporting ES and UMD output)
• https://github.com/wessberg/cjstoesm

Another option might be to use typescript to convert the modules, https://blog.logrocket.com/publishing-node-modules-typescript-es-modules/ contains the basic concepts, here is the related typescript reference https://www.typescriptlang.org/docs/handbook/2/modules.html. (And since we anyways plan to generate our types (see #285), this approach has the lower amount of devDependencies.)

We would also need to decide how to include both formats into the package. There are quite some options:

• https://2ality.com/2019/10/hybrid-npm-packages.html
• https://www.sensedeep.com/blog/posts/2021/how-to-create-single-source-npm-module.html

and potential issues:

• https://nodejs.org/api/packages.html#packages_dual_package_hazard

and we need to make sure we stay backward compatible. So another option (for the time being) might be to publish the ES Module package under a separate name?

@ anybody: Please share any other ideas of how to solve this specific issue.

[stell]

Any news on an ES6 version of this?

[karfau]

Any news on an ES6 version of this?

My previous comment is still the most up to date one. (Tldr: some tooling needs to currently be applied that is not part of this library.)

But I have added some examples to the repo that show how it is possible to use the library in such setups.

If you have a specific use case/setup that is not covered yet, please provide an example via github, stackblitz or something similar.

And of course if somebody has an idea how to achieve this in a backward compatible way and without a rewrite, PRs are very welcome.

[taisukef]

I made an ES6 version.
https://github.com/code4fukui/xmldom-es

You can run on Deno REPL

import { DOMParser, XMLSerializer } from "https://code4fukui.github.io/xmldom-es/xmldom.js";

const source = `<xml xmlns="a">
	<child>test</child>
	<child/>
</xml>`;

new DOMParser().parseFromString(source, "text/xml");

[karfau]

@taisukef thx for providing an example of what needs to be done to switch to modules and support deno.

I still think we need to find a way to additionally continue to support ES5.

I'm guessing that we could migrate the code like you did but put it into mjs files and add a build/transpilation step to continue to support ES5?
Ideally in a way that it doesn't break existing usages.

[fdb]

Hi,

Using Rollup I also get the same issue that it can't find DOMParser as an export:

src/main.js → dist/bundle.js...
[!] RollupError: "DOMParser" is not exported by "node_modules/@xmldom/xmldom/lib/index.js", imported by "src/main.js".
https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module
src/main.js (1:9)
1: import { DOMParser } from '@xmldom/xmldom';

I made a minimal example project here:

https://stackblitz.com/edit/node-ert3fy?file=src/main.js

My main.js looks like this:

import { DOMParser } from '@xmldom/xmldom';

const source = `<xml xmlns="a"><child>test</child><child/></xml>`;

const dom = new DOMParser().parseFromString(source, 'text/xml');
// .... other code ....

My rollup.config.js looks like this:

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'app',
    sourcemap: true,
  },
  plugins: [nodeResolve()],
};

[karfau]

@fdb I am not experienced with rollup, but did you try to modify your config in a way that was suggested in this comment: #316 (comment) ?