mjs files get imported as static files

Hello,

Here is a repro :

import graphql, { parse, buildASTSchema, buildClientSchema } from 'graphql'
console.log(graphql, parse, buildASTSchema, buildClientSchema)
// ouput : /static/media/index.497f5ee2.mjs undefined undefined undefined

Excluding the .mjs extension from the file-loader fix the issue.

[jdalton]

@jaydenseric

which is so ESM can run natively in Node.js v8.5+ in --experimental-modules mode. […] Node.js v10 end-of-life is April 2021 […] The deliberately stunted adoption is what is making this difficult, if --experimental-modules was unflagged

👋 Node core and Node Module WG member here. Just a heads up, there is no set date for when --experimental-modules will be unflagged. There’s also no guarantee that what has shipped now is what will be in the future. The Node Module WG does not recommend using --experimental-modules for production use.

Discourage use of an “experimental” feature, sure. But I can’t get my head around why anyone would encourage incorrect use of .mjs; there is no benefit to the ecosystem and it makes things more complex, not simpler.

Bundling mushes transpiled code, CJS, ESM, and .mjs code together. Things can get a little funky.

Anyway, speculating about the service life of .mjs doesn’t help to resolve this perfectly solvable CRA issue: “mjs files get imported as static files”.

👍

@Timer

can you confirm my conclusion is somewhat right?

Yep. It’ll do 😎

[jdalton]

@Timer

graphql is probably the best package to test with: it supports CommonJS and ESM, properly toggling between ESM or CommonJS based on what the Node environment supports.

It’s still pretty hard to get things right with the current state of things. For example, even graphql has issues working with --experimental-modules with mixed CJS and ESM use. It’d be helpful to avoid any solution that makes .mjs viral (requiring consumers, or deps of deps to be renamed to .mjs to get things bundled properly).

Projects like Babel 7, webpack 4, and esm restrict .mjs use or implement more-strict rules when handling experimental .mjs files. However, Babel and webpack can be configured to handle .mjs in less-strict ways. I think complications may come from webpack enforcing its javascript/esm for .mjs by default, instead of javascript/auto for the module type.