如何让create-react-app支持.mjs文件和webpack？

Question

我正在尝试使用这个twitch npm包(https://www.npmjs.com/package/twitch)，在通过creat-react-app / react-scripts进行部署时遇到了一些问题。

据我所知，与create-react-app捆绑在一起的webpack配置不喜欢这个npm包使用的.mjs文件。所以，当我尝试构建应用程序时，我得到了下面的错误。

./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)

如果我手动删除了"es“文件夹，那么构建就能正常工作，一切都能正常工作。然而，这并不是一个真正的解决方案，因为当我推送到生产环境并在那里部署时，节点模块将被重新安装，构建再次失败。

构建过程并不是我的强项，在谷歌搜索了一段时间后，我无法找到解决方案。如果有人可以帮助我或可以指出正确的方向，那将是非常感谢！

如果有帮助，这是我的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"
    }
  }
}

Answer 1

在this GitHub comment上提出的建议是将react-app-rewired添加到您的项目中，然后使用以下config-overrides.js文件：

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

  return config;
}

在我的项目中，我已经在使用react-app-rewired，所以我只是添加了该代码片段中的规则。这个变通方法修复了我的错误。

在twitch库的具体情况下，作者建议尝试@next发行版，尽管我还没有亲自验证这个解决方案。