Can't import the named export X from non EcmaScript module (only default export is available)

[dargmuesli]

Upgrading to v8 yields a build error for my project:

ERROR in ./node_modules/parseley/lib/parseley.mjs 171:30-37
Can't import the named export 'Grammar' from non EcmaScript module (only default export is available)
@ ./node_modules/selderee/lib/selderee.cjs
@ ./node_modules/@selderee/plugin-htmlparser2/lib/hp2-builder.mjs
@ ./node_modules/html-to-text/lib/html-to-text.js
@ ./node_modules/html-to-text/index.js
@ ./plugins/htmlToText.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js

There are errors for Grammar, Parser, Picker, compareSpecificity, compile, isTag, normalize, parse1 and parse1: source

How to go about this one?

[KillyMXI]

Hmm. It looks like something can't decide between cjs/mjs when used with Vue/nuxt.
I may have to tweak parseley/selderee packages.

I haven't started working on web compatibility yet (it was meant to be a node-only package) so I would be glad for an advice how to make dual packages work with more bundlers.

[KillyMXI]

isTag comes from htmlparser2 infrastructure. If that can't be sorted in node-html-to-text then it would require an upstream issue...

[KillyMXI]

On another look, I'm pretty confident about my packages.
There might be ways to dance around various bundler issues with obscure measures such as avoiding ".mjs" extension or using only default imports but I'm not going to support that and I think bundlers should be fixed instead.

The issue comes from Webpack.
Things to try:

• change Webpack version;
• add a rule for mjs into Webpack config (as in there or there or there)

(Please report back if you find something that works for you. I'm pretty sure more people will run into this issue.)

[MatthewAlbrecht]

Receiving a similar error,

[KillyMXI]

@MatthewAlbrecht what framework/bundler you use? What version?
Can you try things from the previous comment?

[dargmuesli]

add a rule for mjs into Webpack config (as in there or there or there)

All three solutions resolve the issue of build failure, but I'm pretty sure Nuxt has a reason to exclude node_modules except for exceptions defined through build.transpile, but those exceptions don't work for me yet. I'll look into this further.

[dargmuesli]

Here we go: nuxt/nuxt#6688

[dargmuesli]

The next version of Nuxt.js (after 2.15.6) looks like it will include nuxt/nuxt#9180. Having that and using

build: {
    transpile: [/\.mjs$/]
}

in nuxt.config.js resolves this issue for me.

[claytonfbell]

Got this with a create-react-app project also.

Creating an optimized production build...
Failed to compile.

./node_modules/@selderee/plugin-htmlparser2/lib/hp2-builder.mjs
Can't import the named export 'Picker' from non EcmaScript module (only default export is available)

Version 7 works fine.

Using "react-scripts": "^3.4.4",

Webpack version from package-lock.json is

    "webpack": {
      "version": "4.42.0",

[KillyMXI]

@claytonfbell in version 8 I started to use new packages. I follow generally recommended way to define dual packages there.
Webpack 4 falls in the crack between not knowing what mjs is and being able to handle it completely.
So, for as long as you stuck with Webpack version 4 - you have to tell it what to do via configuration. (see links in the comment above).
Webpack 5 is apparently free of the issue.

[german-st]

On another look, I'm pretty confident about my packages.
There might be ways to dance around various bundler issues with obscure measures such as avoiding ".mjs" extension or using only default imports but I'm not going to support that and I think bundlers should be fixed instead.

The issue comes from Webpack.
Things to try:

• change Webpack version;
• add a rule for mjs into Webpack config (as in there or there or there)

(Please report back if you find something that works for you. I'm pretty sure more people will run into this issue.)

@KillyMXI

please see my comment:
Error in CRA and html-to-text

[dargmuesli]

You might want to give Killy an hour or two to respond before creating another notification for all issue subscribers ;)

[german-st]

I'm not trying to rush someone) I'm making a link between issues that those who will search in the future can find the answer more conveniently and faster, if there is one)

[dalmo3]

If anyone else on 8.0.0 is getting those errors when running Storybook 6.3 (Webpack 4), this solved it for me (thanks Killy):

// .storybook/main.js

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      type: 'javascript/auto',
      test: /\.mjs$/,
      use: [],
    });
    return config;
  },
};