Inferno: Inferno-* Packages break on V4 with Webpack 4

[IgnusG]

Observed Behaviour

When using inferno-mobx with inferno 4 and webpack 4 the build fails with the following message:

ERROR in ./node_modules/inferno-mobx/dist/index.mjs
467:2-11 Can't import the named export 'Component' from non EcmaScript module (only default export is available)
 @ ./node_modules/inferno-mobx/dist/index.mjs
 @ ./node_modules/inferno-mobx/index.mjs
 @ ./src/index.jsx

inferno-clone-vnode, inferno-compat, inferno-create-class, inferno-mobx & inferno-router all seem to break with similar errors with either Can't import or Can't reexport.

This only happens when one of these packages is imported inside the code. Check out the master branch for the working code without anything outside of inferno and the broken branch with inferno-mobx in https://github.com/IgnusG/infernoV4-webpackV4-fail

Inferno Metadata
Inferno 4.0.8
Webpack 4.1.0

[jdalton]

Adopting .mjs is a bit premature since Node is still ironing out support. This means your code will be feature limited to a narrow path of known behaviors with .mjs in webpack.

Update:

If you use ESM with .js then no type config is needed. It with automatically use javascript/auto and also give you named exports of CJS modules in ESM 🙌

[Ownelek]

@jdalton so whats the solution to this error ? I am having exactly same problem.
I am not using any .mjs files inside my project.

[jdalton]

@Ownelek are you using a package that does use .mjs? If not it could be a webpack bug.

[Ownelek]

@jdalton In my project only Inferno uses .mjs, and with Inferno I have this error.

ERROR in ./node_modules/inferno-create-element/dist/index.mjs
115:15-35 Can't import the named export 'createComponentVNode' from non EcmaScript module (only default export is available)
 @ ./node_modules/inferno-create-element/dist/index.mjs
 @ ./app/client.js

ERROR in ./node_modules/inferno-create-element/dist/index.mjs
117:11-22 Can't import the named export 'createVNode' from non EcmaScript module (only default export is available)
 @ ./node_modules/inferno-create-element/dist/index.mjs
 @ ./app/client.js

ERROR in ./node_modules/inferno-create-element/dist/index.mjs
64:16-39 Can't import the named export 'getFlagsForElementVnode' from non EcmaScript module (only default export is available)
 @ ./node_modules/inferno-create-element/dist/index.mjs
 @ ./app/client.js

Also I am using Typescript in my project, so ./app/client.js is a transpiled version of ./app/client.tsx.

import * as Inferno from "inferno";
import {createElement} from 'inferno-create-element';
import {ChaosHelperView} from "./pages/chaosHelper/ChaosHelperView";

Inferno.render(<ChaosHelperView/>, document.getElementsByTagName('main')[0]);

[IgnusG]

All inferno packages use it I think. I tried patching it by removing the .mjs files from inside node_modules but that results in a lot of other errors

Ultimately this needs to be fixed by inferno as for now this breaks

[Havunen]

I will change all file extensions from .mjs to .esm.js that should work without issues. We need to bump version to 5 because its breaking change.

[IgnusG]

Makes me sad for some reason. Was hoping for some big new features in 5 :sweat_smile:
Guess will have to wait for 6

[Havunen]

Fix for this has landed to dev https://github.com/infernojs/inferno/commit/96bc3af8278b6f46e1ae37fbba67cfcf1294086d
I will close this ticket as it will be fixed in next release. v5