Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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: https://github.com/reactioncommerce/reaction-component-library/issues/399 and https://github.com/formatjs/formatjs/issues/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

Make a new CRA
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
Import this package
npm start
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.