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

[DrRataplan]

Describe the bug

When depending on a package with a module with an 'mjs' extension, CRA does not load. This seems to be something CRA-related, because having an extension .mjs for modules is one of the (ammitedly MANY different) extension documented for ES6 modules. For example, it is one of the defaults in webpack: https://webpack.js.org/configuration/resolve/#resolveextensions.

I am aware that changing the extension will make these dependencies work, but I am a bit afraid other tools may come up in the future with different wishes regarding extensions, having us to choose between supporting CRA vs that other hypothetical tool.

Did you try recovering your dependencies?

I have a new and freshly made CRA here: https://github.com/DrRataplan/cra-mjs-repro. Check it out, install it and run npm start. Observe the error Can't import the named export 'compileVM' from non EcmaScript module (only default export is available).

Which terms did you search for in User Guide?

I searched for 'mjs', the exact error etc. No usable results. I did find a number of related issues though: reactioncommerce/reaction-component-library#399 and formatjs/formatjs#1395 for example, but they all reverted back to using 'create-react-app-rewired' to fix this issue for themselves. I am actually a maintainer for a package that is affected by this, and I would like my users to not revert to workarounds if they want to use my library in CRA.

Environment

npx: installed 67 in 3.415s

Environment Info:

  current version of create-react-app: 4.0.1
  running from /home/martin/.npm/_npx/275930/lib/node_modules/create-react-app

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 14.8.0 - ~/.nvm/versions/node/v14.8.0/bin/node
    Yarn: Not Found
    npm: 6.14.11 - ~/.nvm/versions/node/v14.8.0/bin/npm
  Browsers:
    Chrome: 87.0.4280.141
    Firefox: 84.0.1
  npmPackages:
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1 
    react-scripts: 4.0.1 => 4.0.1 
  npmGlobalPackages:
    create-react-app: Not Found

(But this happens in all environments I have seen so far.

Steps to reproduce

1. Make a new CRA
2. Install a package with a .mjs module export. something with a dependency with a .mjs export. Such as xspattern, fontoxpath, etc. I chose xspattern in the reproducable case: https://github.com/DrRataplan/cra-mjs-repro
3. Import this package
4. npm start
5. Observe error

Expected behavior

It just works. I can just npm install any package (that is expected to work in the browser). CRA will configure Webpack to just load the main extensions as ES6 modules.

Actual behavior

A crash:

Reproducible demo

https://github.com/DrRataplan/cra-mjs-repro

[alex-gopuff]

+1 seeing this exact issue with graphql-compose as well.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[onichandame]

seeing the same error with @graphql-tools/mock

[MichelML]

+1 for framer/motion#1307

[madaster97]

This seems fixed in CRA 5.0.0. Could anyone else verify and add it to the addressed issues for that release?

[enomado]

I have this problem when try to load wasm

[fig666]

that's because your not approved by the owner of the organized app

[isc30]

disgusting changes in latest webpack

[luminajames]

I've also faced this with some internal libraries at work. I've come across this workaround but would be happy to hear any other workarounds people have.

If I use any other extension than .mjs, I get an error message that says I can't use import outside of a module.

[yudhishthir-siterecon]

+1 for @plasmicpkgs/radix-ui

[yudhishthir-siterecon]

If you are using CRACO for react app, add the following webpack configuration to your craco.config.js:

  module.exports = {
    webpack: {
      configure: (webpackConfig, { env, paths }) => {
        // Add a rule to handle .mjs files
        webpackConfig.module.rules.push({
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto',
        });
  
        return webpackConfig;
      },
    },
  };