Question

我使用 react-app-rewired 和 react-app-rewire-less 将Less应用于基于React的我的应用程序。它在本地运行良好，但是当我将其部署到Heroku时，它失败了，并且出现了应用程序错误和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.`

Answer 1

类似于此处引用的同一问题：breaks with NODE_ENV=production。

该问题的注释中链接了workaround，该问题添加了List中的const lessLoader = cssRules.loader || cssRules.use和cssRules.loader中的lessLoader与react-app-rewire-less/index.js交换。

Answer 2

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

"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应用。它为我工作。我不需要在NODE_ENV=production前面添加react-app-rewired start。工作正常。

在Heroku上部署React-app-rewired和React-app-rewire-less

2 个答案: