在 Heroku 上部署 react-app-rewired 和 react-app-rewire-less答案

【问题标题】：Deploy react-app-rewired and react-app-rewire-less on Heroku在 Heroku 上部署 react-app-rewired 和 react-app-rewire-less
【发布时间】：2019-01-21 05:13:32
【问题描述】：

我使用 react-app-rewired 和 react-app-rewire-less 将 Less 应用到基于 React 的应用中。它在本地运行良好，但是当我将它部署到 Heroku 时，它失败了，并且出现了 Application Error 和 Heroku 日志中的错误列表。

我采取了两项措施： 1）我卸载了 npm 并在全局范围内重新安装它以避免潜在的错误。 2）为了保证这两个依赖（react-app-rewired和react-app-rewire-less）正常工作，我卸载了它们并使用npm install [dependency name] --save在本地重新安装，但应用程序错误仍然存在。

谁能告诉我问题的根源并提出解决方案？下面是我的package.json。

`{
  "name": "portfolio",
  "version": "1.0.0",
  "engines": {
    "node": "8.11.1"
  },
  "private": true,
  "dependencies": {
    "react": "^16.4.2",
    "react-app-rewire-less": "^2.1.2",
    "react-app-rewired": "^1.5.2",
    "react-dom": "^16.4.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },
  "devDependencies": {}
}`

这是我的 Heroku 错误消息：

`2018-08-14T09:39:19.000000+00:00 app[api]: Build succeeded
2018-08-14T09:39:22.097727+00:00 heroku[web.1]: Starting process with command `npm start`
2018-08-14T09:39:24.612289+00:00 app[web.1]:
2018-08-14T09:39:24.612308+00:00 app[web.1]: > portfolio@1.0.0 start /app
2018-08-14T09:39:24.612310+00:00 app[web.1]: > react-app-rewired start
2018-08-14T09:39:24.612312+00:00 app[web.1]:
2018-08-14T09:39:26.199701+00:00 app[web.1]: /app/node_modules/react-app-rewire-less/index.js:28
2018-08-14T09:39:26.199764+00:00 app[web.1]: ...cssRules.loader,
2018-08-14T09:39:26.199766+00:00 app[web.1]: ^
2018-08-14T09:39:26.199768+00:00 app[web.1]:
2018-08-14T09:39:26.199770+00:00 app[web.1]: TypeError: cssRules.loader is not iterable
2018-08-14T09:39:26.199772+00:00 app[web.1]: at /app/node_modules/react-app-rewire-less/index.js:28:23
2018-08-14T09:39:26.199774+00:00 app[web.1]: at Object.override [as webpack] (/app/config-overrides.js:5:12)
2018-08-14T09:39:26.199776+00:00 app[web.1]: at Object.<anonymous> (/app/node_modules/react-app-rewired/scripts/start.js:13:13)
2018-08-14T09:39:26.199778+00:00 app[web.1]: at Module._compile (module.js:652:30)
2018-08-14T09:39:26.199780+00:00 app[web.1]: at Object.Module._extensions..js (module.js:663:10)
2018-08-14T09:39:26.199781+00:00 app[web.1]: at Module.load (module.js:565:32)
2018-08-14T09:39:26.199783+00:00 app[web.1]: at tryModuleLoad (module.js:505:12)
2018-08-14T09:39:26.199784+00:00 app[web.1]: at Function.Module._load (module.js:497:3)
2018-08-14T09:39:26.199786+00:00 app[web.1]: at Function.Module.runMain (module.js:693:10)
2018-08-14T09:39:26.199787+00:00 app[web.1]: at startup (bootstrap_node.js:188:16)
2018-08-14T09:39:26.199789+00:00 app[web.1]: at bootstrap_node.js:609:3
2018-08-14T09:39:26.224092+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2018-08-14T09:39:26.224599+00:00 app[web.1]: npm ERR! errno 1
2018-08-14T09:39:26.226462+00:00 app[web.1]: npm ERR! portfolio@1.0.0 start: `react-app-rewired start`
2018-08-14T09:39:26.226736+00:00 app[web.1]: npm ERR! Exit status 1
2018-08-14T09:39:26.227064+00:00 app[web.1]: npm ERR!
2018-08-14T09:39:26.227388+00:00 app[web.1]: npm ERR! Failed at the portfolio@1.0.0 start script.
2018-08-14T09:39:26.227672+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.`

【问题讨论】：

标签： css reactjs heroku npm less

【解决方案1】：

看起来与此处引用的相同问题：breaks with NODE_ENV=production。

workaround 链接到该问题的 cmets 中，该问题添加了 const lessLoader = cssRules.loader || cssRules.use 并在 react-app-rewire-less/index.js 中将 cssRules.loader 与 lessLoader 交换。

【讨论】：

感谢您的回复！该链接中的解决方法建议更改 react-app-rewire-less/index.js 内的几行，但该文件位于“node_modules”文件夹中，无法推送到云端，将由 npm 更新。如何将此解决方案应用于我的应用程序？
我会尝试分叉存储库，应用我的更改，然后使用 GitHub URLs 更新您的 package.json 以指向您的分叉

【解决方案2】：

只需在package.json 文件的dependencies 中添加以下依赖项即可。

"babel-plugin-import": "^1.12.2",
"less-loader": "^5.0.0",
"react-app-rewire-less": "^2.1.3",
"react-app-rewired": "^2.1.5"

然后在 heroku 上部署你的 react 应用。它对我有用。我不需要在react-app-rewired start 前面添加NODE_ENV=production。它工作正常。

【讨论】：