Can't import the named export 'Component' from non EcmaScript module

[linmingren]

Describe the bug

./node_modules/@reactioncommerce/components/InPageMenuItem/v1/InPageMenuItem.mjs
Can't import the named export 'Component' from non EcmaScript module (only default export is available)

To Reproduce
import InPageMenuItem from "@reactioncommerce/components/InPageMenuItem/v1"

Desktop (please complete the following information):

• OS: OSX
• Browser: chrome
• Version: nodejs: 8.12.0, npm:6.4.1

[aldeed]

@linmingren Are you using Webpack, or what is the build tool? Is the error coming from the build or do you see it in the browser console? It will be easier to debug this if you're able to make a minimal reproduction app and post it publicly.

[linmingren]

My steps:

1. npx create-react-app my-app
2. Adding import InPageMenuItem from "@reactioncommerce/components/InPageMenuItem/v1" in the App.js.
3. run "npm start" and I got the error message both in the browser and command line.

[linmingren]

My package.json:

{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-scripts": "2.1.5",
"styled-components": "^3.3.3",
"reacto-form": "0.0.2",
"@reactioncommerce/components-context": "1.2.0",
"@reactioncommerce/components": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

[aldeed]

@linmingren Thanks for the steps. The issue is because create-react-app uses Webpack 4 now, which tries to load .mjs files by default. This component library package is published with module support, too, so all would be well, except that react and create-react-app don't fully support modules. This means that the places where @reactioncommerce/components imports from other libraries can get tricky.

The good news is that there is a workaround, a way to adjust the default create-react-app webpack config and get it working.

First, install the react-app-rewired NPM package as a dev dependency.

Then, in package.json, update the start, build, and test scripts to replace react-scripts with react-app-rewired:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

Finally, paste this into a file in the project root directory named config-overrides.js:

module.exports = function override(webpackConfig) {
  webpackConfig.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto"
  });

  return webpackConfig;
}

Now npm start / yarn start should work.

If you get an error about missing react-stripe-elements dependency, you'll have to add that package, too. It shouldn't be a dependency when you're not using any of the Stripe components, but I think there are some places where the imports are pulling in more than they should be.

[aldeed]

I filed the react-stripe-elements issue separately here: #400

[linmingren]

@aldeed Hi, your solution really works! Thanks!

[rc-publisher]

🎉 This issue has been resolved in version 0.64.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[danilofuchs]

For anyone searching for a solution using customize-cra, I was able to make it work by creating a custom override:

// config-overrides.js
const { override } = require("customize-cra");

const supportMjs = () => (webpackConfig) => {
    webpackConfig.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto",
    });
    return webpackConfig;
};

module.exports = override(
    supportMjs()
);

[netpoe]

For anyone searching for a solution using customize-cra, I was able to make it work by creating a custom override:

// config-overrides.js
const { override } = require("customize-cra");

const supportMjs = () => (webpackConfig) => {
    webpackConfig.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto",
    });
    return webpackConfig;
};

module.exports = override(
    supportMjs()
);

Thanks @danilofuchs this worked for me.
My issue was with the @polkadot JS library, if anyone comes from a google search regarding the error:

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

[quisido]

This issue is the top Google result for "Can't import the named export..." and is referenced by StackOverflow here. Can you speak more to this statement?

react and create-react-app don't fully support modules.

The provided solution works. Where is the bug here? Is the problem that react-scripts is misconfigured for .mjs files, or is the problem with dependencies misconfiguring their .mjs distributions? This seems wrong that a dependency has to say, "If you want to use this with CRA, you have to install react-app-rewired with this adjustment." Is it a problem with the dependency or with CRA?

[mikedalu]

@linmingren Thanks for the steps. The issue is because create-react-app uses Webpack 4 now, which tries to load .mjs files by default. This component library package is published with module support, too, so all would be well, except that react and create-react-app don't fully support modules. This means that the places where @reactioncommerce/components imports from other libraries can get tricky.

The good news is that there is a workaround, a way to adjust the default create-react-app webpack config and get it working.

First, install the react-app-rewired NPM package as a dev dependency.

Then, in package.json, update the start, build, and test scripts to replace react-scripts with react-app-rewired:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

Finally, paste this into a file in the project root directory named config-overrides.js:

module.exports = function override(webpackConfig) {
  webpackConfig.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto"
  });

  return webpackConfig;
}

Now npm start / yarn start should work.

If you get an error about missing react-stripe-elements dependency, you'll have to add that package, too. It shouldn't be a dependency when you're not using any of the Stripe components, but I think there are some places where the imports are pulling in more than they should be.

This worked for me, thanks a bunch... took me a week before i came across this solution

[Mojtaba-Pourkhanlar]

@aldeed It works with these changes.
Thanks man

[Djotchuang]

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"

Thanks very much! This worked for me.

[rohithvemulapati]

Thank you so much bro, it worked.