mjs causes trouble

[TrySound]

Webpack has an opinion to not resolve mjs from non mjs packages.
reactjs/react-transition-group#77 (comment)

However you enforced it via module field and webpack becomes crazy about it.
We got this issue mui/material-ui-pickers#894

I propose to get rid from mjs in favour of just stable module field which can be safely resolved by webpack.

[lukeed]

Wow, what a nightmare. I swear they keep changing their resolution alg & how they treat ESM & .mjs files 😠

[TrySound]

Heh. I like .esm.js ending and use it in a lot of projects. What do you think?

[TrySound]

Thanks for fast feedback!

[lukeed]

Had that initially – making a (lame attempt) statement for .mjs support.

Thanks for raising the issue 🙇

[TrySound]

I would wait til mjs will become stable. Ideally we should all move to https://github.com/standard-things/esm

[lukeed]

It was stable – webpack changed their behavior/treatment. IIRC it was masked in CRA uproar, but CRA changed their behavior only because webpack did.

Ideally we wouldn't need esm anywhere. For me, it's a last resort. I mostly use it for unit testing in large codebases.

[dmtrKovalenko]

Please, let me know when it will be published

[lukeed]

@dmtrKovalenko It already is :) version 1.0.3

[alekseykulikov]

Agreed we don't need esm since node supports ESM quite well. But the file should be .mjs. Otherwise, it can't use export default when referred directly from the node. I think https://github.com/developit/htm is a good example of the module supporting ESM.
According to https://medium.com/@giltayar/native-es-modules-in-nodejs-status-and-future-directions-part-i-ee5ea3001f71 .mjs is the only way to use ESM, and .js reserved for CJS modules, which dist/clsx.m.js is not.

[TrySound]

@alekseykulikov .mjs doesn't work. Webpack is broken with it in many cases. esm is a better option. It supports module field just fine.

@lukeed esm allows to not transpile commonjs to esm in pure module bundler like rollup.

[TrySound]

@alekseykulikov clsx had the same setup as htm has. Try to tell everybody it's their problem.
mui/material-ui-pickers#894

I'd say mjs is not ready for use.

[alekseykulikov]

@TrySound you point the issue with webpack, that should be addressed by clsx. Version 1.0.3 breaks my case. I don't use webpack, and don't want to run node with -r esm. .mjs works in node and browser without any transpilation. Parcel supports .mjs. I'd say, webpack should follow the node regarding .mjs resolution, because the extension is introduced because of node.

Could you point why webpack decided to change the resolution algorithm from node?

[lukeed]

Webpack needs this config to make .mjs work:

rules: [{
    test: /\.m?jsx?$/,
    type: 'javascript/auto',
}]

This tells webpack to treat it like everything else.

I'm not sure why webpack has done this. It's frustrating tbh. I would much rather use .mjs but the reality is that 90% of developers won't have webpack configured correctly, especially with tools like CRA refusing to include the above config.

[TrySound]

@alekseykulikov But you have to add experimental-modules flag. Is it shorter? And you have to use ugly mjs extension. It's made mostly for dual mode which fails with webpack. That's why I would wait until it become stable.

[lukeed]

Just wrapped it up into a plugin: webpack-modules. Importing it will fix .mjs usage in webpack.