错误：部署到 heroku 时找不到模块“webpack”

Posted 2023-03-07

【中文标题】错误：部署到 heroku 时找不到模块“webpack”

【英文标题】：Error: Cannot find module 'webpack' when deploying to heroku

【发布时间】：2017-06-07 11:11:37

【问题描述】：

从其他主题（没有帮助我）来看，这似乎是一个反复出现的问题，我正在尝试将我的应用程序部署到 heroku。它与heroku local web 一起工作正常，我已经将应用程序和git heroku push 部署到主服务器，但是一旦我运行heroku open，什么都没有加载，我收到以下错误：

应用程序错误应用程序和您的页面发生错误 无法送达。如果您是应用程序所有者，请检查您的日志 了解详情。

我检查了我的日志，它说：

Error: Cannot find module 'webpack'

我的包 JSON 具有以下依赖项：

  "dependencies": 
    "babel-runtime": "^6.20.0",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-timestamp": "^3.1.0",
    "superagent": "^3.3.2"
  ,
  "devDependencies": 
    "babel-core": "^6.21.0",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "cross-env": "^3.1.3",
    "css-loader": "^0.26.1",
    "eslint": "^3.12.2",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-formatter-pretty": "^1.1.0",
    "eslint-plugin-compat": "^0.1.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "2.2.3",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-react": "^6.8.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "react-transform-hmr": "^1.0.4",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  

脚本：

  "scripts": 
    "start": "node server.js",
    "build": "cross-env BABEL_ENV=production ./node_modules/.bin/webpack --config webpack.config.production.js",
    "lint": "eslint --cache --ignore-path .gitignore --format=node_modules/eslint-formatter-pretty . *.js",
    "test": "npm run lint"
  ,

我必须做些什么才能让它在 heroku 上运行？需要在服务器上安装 webpack 吗？？这是如何工作的

对依赖项的新更新

  "dependencies": 
    "babel-runtime": "^6.20.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-timestamp": "^3.1.0",
    "superagent": "^3.3.2",
    "webpack": "^1.14.0",
    "webpack-combine-loaders": "^2.0.3",
    "webpack-dev-server": "^1.16.2",

      "babel-core": "^6.21.0",
      "babel-eslint": "^7.1.1",
      "babel-loader": "^6.2.10",
      "babel-plugin-react-transform": "^2.0.2",
      "babel-plugin-transform-runtime": "^6.15.0",
      "babel-preset-es2015": "^6.18.0",
      "babel-preset-react": "^6.16.0",
      "babel-preset-stage-0": "^6.16.0"

  ,
  "devDependencies": 
    "cross-env": "^3.1.3",
    "css-loader": "^0.26.1",
    "eslint": "^3.12.2",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-formatter-pretty": "^1.1.0",
    "eslint-plugin-compat": "^0.1.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "2.2.3",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-react": "^6.8.0",
    "react-transform-hmr": "^1.0.4",
    "style-loader": "^0.13.1"

  

错误

2017-01-24T13:19:09.342589+00:00 app[web.1]: webpack: bundle is now VALID.
2017-01-24T13:20:01.547772+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2017-01-24T13:20:01.547772+00:00 heroku[web.1]: Stopping process with SIGKILL
2017-01-24T13:20:01.695160+00:00 heroku[web.1]: Process exited with status 137
2017-01-24T13:20:01.703185+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-24T13:25:57.948086+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=whapp.herokuapp.com request_id=9206d33a-fd68-461d-a4d9-dd620ad9d1c8 fwd="94.119.64.6" dyno= connect= service= status=503 bytes=
2017-01-24T13:25:58.798446+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=wheather-app.herokuapp.com request_id=48131770-43d1-4702-b201-244ec94a8011 fwd="94.119.64.17" dyno= connect= service= status=503 bytes=
2017-01-24T13:27:07.565562+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=whapp.herokuapp.com request_id=d38c3a55-6b83-4afa-85dc-944cb4607482 fwd="94.119.64.7" dyno= connect= service= status=503 bytes=
2017-01-24T13:27:08.488193+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=wheather-app.herokuapp.com request_id=fe267ccf-e202-46e6-aa47-1dc0fd2b8c78 fwd="94.119.64.4" dyno= connect= service= status=503 bytes=

【参考方案1】：

将 webpack（以及您构建 Heroku slug 所依赖的任何其他工具从 package.json 中的“devDependencies”移动到“dependencies”。

您也应该能够使用简单的“webpack”而不是 ./node_modules/.bin/webpack 来调用它。

默认情况下，“devDependencies”只安装在 Dev 平台的 node_modules 中，而 Heroku 被定义为生产平台。

【讨论】：

谢谢，但现在似乎每次我将一个包添加到生产环境时，都会丢失另一个包。最后一个 ` webpack-combine-loaders `，我什至一开始都没有使用。当我打开heroku时，页面永远加载然后告诉我它缺少下一个模块Module not found: Error: Cannot resolve module 'babel' in /app。是否有应该在产品中的模块列表，我可以从某个地方获得？这不是 heroku 记录的很好的东西。

看起来您正在生产环境中使用 babel* 包，因此也将它们移至“依赖项”。在最坏的情况下，只需将所有内容移至“依赖项”以使其正常工作，然后您就可以开始将生产中不需要的包移回 devDependencies。

另一件需要考虑的事情是，如果你在开发环境中使用“npm install -g”安装了任何包，它们可能不在你的 package.json 中，并且如果生产需要它们，那么 Heroku 将找不到它们。但无论如何，首先将所有内容从 devDependencies 转移到依赖项，看看是否能解决问题。如果是这样，那么你的所有依赖项都确实在 package.json 中引用，然后你可以简单地移动到 devDependencies 生产不需要的任何包。

再次感谢。但是这个东西不会打开，我现在从我的 App.jsx 文件本身中得到一个未解析的脚本：`找不到模块：错误：无法解析 /app/scripts 中的模块“样式”。文件是 ./scripts/style.css 这是一个单独的问题吗？

您确定将该文件添加到您的 git 存储库中吗？如果你运行“heroku run bash”，你能找到那个文件吗？