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"
    }
  }
}

Noncombatant

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. – Noncombatant

Answer 1

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.

Spoil

Answer 2

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.

Motorcar

Sadly, it didn't work in my case. – Unessential

Answer 3

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 [email protected] or

yarn add --exact [email protected]

Weatherly