2

Judging from other topics (none which helped me), this seems to be a reoccurring issue, I am trying to deploy my app to heroku. It works fine with heroku local web, I have deployed the app and git heroku push to the master but as soon as I run heroku open, nothing loads and I get the following error:

Application error An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.

I checked my logs and it says:

Error: Cannot find module 'webpack'

My Package JSON has the following dependencies:

  "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:

  "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"
  },

What do I have to do to get it running on heroku? Do you need to install webpack on the server?? How does this work

NEW UPDATE TO DEPENDENCIES

  "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"

  }

ERROR

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=
HGB
  • 2,157
  • 8
  • 43
  • 74

1 Answers1

5

Move webpack (and any other tools you rely on for building your Heroku slug from "devDependencies" to "dependencies" in your package.json.

You should also be able to call it with just plain "webpack" instead of ./node_modules/.bin/webpack.

By default, "devDependencies" only get installed in node_modules on Dev platforms, whereas Heroku is defined as a production platform.

Yoni Rabinovitch
  • 5,171
  • 1
  • 23
  • 34
  • Thanks but now it seems like every time I add one package to production, another is missing. The last ` webpack-combine-loaders ` which I was not even using in the first place. when I do heroku open, the page loads forever then tells me it's missing the next module `Module not found: Error: Cannot resolve module 'babel' in /app`. Is there a list of modules that should be in prod I can get from somewhere? This is not something heroku documents about very well. – HGB Jan 23 '17 at 06:53
  • It looks like you are using the babel* packages on production, so move them to "dependencies" too. In the worst case, just move everything to "dependencies" to get it working, and then you can starting moving packages not needed on production back to devDependencies. – Yoni Rabinovitch Jan 23 '17 at 06:56
  • Another thing to take into account is that if you installed any packages in your dev environment with "npm install -g", they might not be in your package.json, and if they are required for production, then Heroku won't find them. But anyway, start first with just moving everything from from devDependencies to dependencies, to see if that solves the problem. If so, then all your dependencies are indeed referenced in package.json, and then you can simply move to devDependencies whatever packages are not needed for production. – Yoni Rabinovitch Jan 23 '17 at 07:32
  • Thanks again. This thing will not open however, I am now getting an unresolved script from my App.jsx file itself: ` Module not found: Error: Cannot resolve module 'style' in /app/scripts`. The file is ./scripts/style.css Is this a separate issue? – HGB Jan 23 '17 at 13:51
  • Are you sure you added that file to your git repo? If you run "heroku run bash", can you ls that file? – Yoni Rabinovitch Jan 23 '17 at 15:59
  • Yes: `import styles from './app.css';` `~/scripts $ ls App.js Temp.jsx WeatherIcon.jsx app.css index.js ~/scripts $ ` – HGB Jan 23 '17 at 17:21
  • I have tried this solution: https://github.com/jerrysu/heroku-buildpack-webpack but I find no trace of a .buildpacks file in my app – HGB Jan 23 '17 at 17:23
  • To use buildpacks either manually define a .buildpacks file in the root directory of your project (i.e. in the same directory as package.json), or you can use the heroku buildpacks command (see https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app). The link you referred to uses the first method, so you simply need to create a .buildpacks file and add the 2 lines to it that reference the actual buildpacks for node and webpack. – Yoni Rabinovitch Jan 23 '17 at 21:13
  • That did not work. I thought Heroku deployment was easy. Even if I move everything to dev dependencies nothing works. – HGB Jan 24 '17 at 12:49
  • I have added all the missing modules and now I am getting a crash error. I am so close to giving up on this. – HGB Jan 24 '17 at 13:30
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133909/discussion-between-yoni-rabinovitch-and-hgb). – Yoni Rabinovitch Jan 24 '17 at 15:47
  • The R10 (Boot Timeout) error you are getting now is something else entirely. Can you post your Procfile? – Yoni Rabinovitch Jan 24 '17 at 15:50
  • Also, is your node.js server binding to the correct port? Assuming you wereusing express, you would need something like: app.set('port', process.env.PORT || 5000); app.listen(app.get('port'),function () { console.log('Express server listening on port ', app.get('port')); }); – Yoni Rabinovitch Jan 24 '17 at 15:53
  • Yes, I have added more details to a separate thread: http://stackoverflow.com/questions/41830774/unable-to-push-webpack-react-es6-webpack-boilerplate-to-heroku – HGB Jan 24 '17 at 15:55
  • The problems you report in the other thread are completely different. The questions you asked in this thread have been answered. – Yoni Rabinovitch Jan 24 '17 at 16:02
  • That is why I separated the threads. The conversation split onto something else. – HGB Jan 24 '17 at 16:04