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

问题描述

我正在尝试使用该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"
    }
  }
}

解决方法

在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版本，尽管我尚未亲自验证该解决方案。