Can't import the named export 'XXX' from non EcmaScript module (only default export is available)
DrRataplan opened this issue · 11 comments
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
- Make a new CRA
- Install a package with a
.mjsmodule export. something with a dependency with a.mjsexport. Such asxspattern,fontoxpath, etc. I chosexspatternin 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.
Actual behavior
A crash:
Reproducible demo
+1 seeing this exact issue with graphql-compose as well.
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.
seeing the same error with @graphql-tools/mock
+1 for framer/motion#1307
This seems fixed in CRA 5.0.0. Could anyone else verify and add it to the addressed issues for that release?
I have this problem when try to load wasm
that's because your not approved by the owner of the organized app
disgusting changes in latest webpack
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.
+1 for @plasmicpkgs/radix-ui
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;
},
},
};