如何使用 webpack 使 create-react-app 支持 .mjs 文件？

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

此 GitHub 评论中提出的建议是添加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版本，尽管我还没有亲自验证该解决方案。