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

[linonetwo]

I'm building with microbundle -ts --jsx react

And import like this:

import { DrawComponent } from 'encompass-ecs';
/** Marker component to indicate an entity is a candidate to be used in React */
export class ReactSyncComponent extends DrawComponent {}

The build is fine. But when I import my bundled lib, I got:

Failed to compile.

./node_modules/react-encompass-ecs/dist/react-encompass-ecs.mjs
Can't import the named export 'DrawComponent' from non EcmaScript module (only default export is available)

Where react-encompass-ecs.mjs looks like this:

import{DrawComponent as f,Renders as a,EntityRenderer as s,GeneralRenderer as l,EntityChecker as m}from"encompass-ecs";

[danoc]

I've also run into this and am working around it by removing mjs from the output.

This may be a related thread:
https://github.com/apollographql/react-apollo/issues/1737

[ForsakenHarmony]

yeah it's a problem with webpack sadly, we had to revert back in preact as well

[developit]

Might be worth reverting Microbundle itself to produce .module.js instead of .mjs. This is painful.

[Xiphe]

I assume that going forward the modern format is supposed to fix this?

Is there anything I can do to move the @next version forward?

[AndyOGo]

Any update on this?

Rollup's commonJS plugin offers namedExports option

[AndyOGo]

Actually this is super easy to fix.

Just rename your module field and don't use the *.mjs extension.

I fixed it by renaming module field from dist/index.mjs to dist/index.esm.js.
Reason webpack treat's *.mjs modules very strictly in regard to named imports of commonJS modules.

[ForsakenHarmony]

oh wow, I thought we had updated that in the readme