Repository: create-react-app
Issue: Can't import the named export 'XXX' from non EcmaScript module (only default export is available)
Labels: needs triage,issue: bug report

<!--
    Please note that your issue will be fixed much faster if you spend about
    half an hour preparing it, including the exact reproduction steps and a demo.

    If you're in a hurry or don't feel confident, it's fine to report bugs with
    less details, but this makes it less likely they'll get fixed soon.

    In either case, please use this template and fill in as many fields below as you can.

    Note that we don't provide help for webpack questions after ejecting.
    You can find webpack docs at https://webpack.js.org/.
-->

### 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

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
3. `npm start`
4. 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: 
![image](https://user-images.githubusercontent.com/5022244/104031826-8bc4ad00-51cd-11eb-8ea6-0f03c09055fa.png)

### Reproducible demo

https://github.com/DrRataplan/cra-mjs-repro