How to make create-react-app support .mjs files with webpack?

Question

I'm trying to work with this twitch npm package (https://www.npmjs.com/package/twitch) and am running into some issues when deploying via creat-react-app / react-scripts.

From my understanding, the webpack config that is bundled with create-react-app doesn't like .mjs files that this npm package is using. So, I get the error below when I try to build the app.

./node_modules/twitch/es/API/Kraken/Channel/ChannelApi.mjs
app_1    | Can't import the named export 'Cacheable' from non EcmaScript module (only default export is available)

If I manually deleted the "es" folder, then the build worked and everything functioned as expected. However, this isn't a real solution because when I push to production and deploy there the node modules are re-installed and the build fails once again.

Build processes aren't really my strong suit and after googling around for a while I'm unable to find a solution. If anyone can assist or can point me in the right direction, that would be much appreciated!

If it helps, here is my package.json

{
  "name": "ui",
  "version": "1.0.0",
  "license": "UNLICENCED",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/register": "^7.0.0",
    "axios": "^0.19.2",
    "babel-plugin-dynamic-import-node": "^2.2.0",
    "btoa": "^1.2.1",
    "clipboard-copy": "^3.0.0",
    "connected-react-router": "^6.8.0",
    "dateformat": "^3.0.3",
    "dotenv": "^8.0.0",
    "draft-js": "^0.11.0",
    "draft-js-export-html": "^1.4.1",
    "express": "^4.16.4",
    "file-loader": "^3.0.1",
    "firebase": "^5.2.0",
    "history": "^4.7.2",
    "human-date": "^1.4.0",
    "ignore-styles": "^5.0.1",
    "immutability-helper": "^3.0.0",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.11",
    "normalizr": "^3.2.4",
    "prop-types": "^15.6.1",
    "qs": "^6.5.2",
    "react": "^16.8.0",
    "react-animations": "^1.0.0",
    "react-dnd": "^7.4.5",
    "react-dnd-html5-backend": "^7.4.4",
    "react-dom": "^16.8.0",
    "react-ga": "^2.5.3",
    "react-gtm-module": "^2.0.10",
    "react-helmet": "^5.2.0",
    "react-image-crop": "^8.3.0",
    "react-is": "^16.8.0",
    "react-loadable": "^5.5.0",
    "react-loading-skeleton": "^2.0.1",
    "react-on-screen": "^2.1.1",
    "react-pdf": "^4.0.5",
    "react-pose": "^4.0.6",
    "react-redux": "^6.0.1",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "react-stripe-elements": "^2.0.0",
    "redux": "^4.0.0",
    "redux-devtools-extension": "^2.13.2",
    "redux-thunk": "^2.2.0",
    "reselect": "^3.0.1",
    "semantic-ui-calendar-react": "^0.15.3",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.87.1",
    "styled-components": "^4.2.0",
    "twitch": "^4.2.4",
    "url-loader": "^1.1.2",
    "validator": "^11.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint src",
    "server": "NODE_ENV=production node server/bootstrap.js"
  },
  "engines": {
    "node": "^10.0.0",
    "yarn": "^1.12.3"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.8.1",
    "eslint-plugin-react-hooks": "^3.0.0",
    "prettier": "^2.0.2"
  },
  "proxy": "http://api:8080",
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "jest": {
    "moduleNameMapper": {
      "\\.worker.js": "<rootDir>/__mocks__/workerMock.js"
    }
  }
}

Saw this got upvoted so I'm following up with what I learned. This issue still isn't fixed. It's basically an issue with webpack and react that react apparently doesn't care too much about and webpack sort of said it should be on the individual packages to make sure they are functional. To work around this I had to move any conflicting packages to my back-end and handle the logic there then send it to the front-end. Certainly not ideal but it works for now. — Kyle Pendergast, Oct 14 '20 at 18:35

score 11 · Answer 1 · answered Nov 19 '20 at 08:08

A suggestion presented at this GitHub comment was to add react-app-rewired to your project and then use this config-overrides.js file:

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

  return config;
}

In my project I was already using react-app-rewired, so I just added the rule from that snippet. This workaround fixed the error for me.

In the specific case of the twitch library, the author has suggested trying the @next release, although I haven't personally verified that solution yet.

score 1 · Answer 2 · answered May 21 '22 at 15:46

1

Upgrading to the latest react-scripts version of 5.0.1 in my package.json as of writing this, has solved the issue for me.

answered May 21 '22 at 15:46

HussienK

2,934
2
18
14

Sadly, it didn't work in my case. – Sheikh Wahab Mahmood Jul 28 '23 at 14:24

score 0 · Answer 3 · answered Jun 05 '22 at 23:53

0

Upgrading tolatest react-scripts version of 5.0.1 in my package.json as of writing this use the code npm install --save --save-exact react-scripts@5.0.1 or

yarn add --exact react-scripts@5.0.1

answered Jun 05 '22 at 23:53

tito refat

1

How to make create-react-app support .mjs files with webpack?

3 Answers3