Webpack not found, deploying to Heroku

Question

very new to Node and deploying to Heroku. I have a basic React app set up and am attempting to deploy to Heroku. I have it pushed, but the app is failing. When I look at the logs I see something about sh: 1: webpack: not found (full log here)

I'm not really certain what's going on, but believe it has something to do with my package.json? From the starter template I am using it is as such:

{
    "name": "express-react-redux-starter",
    "version": "1.0.0",
    "description": "Starter for Express, React, Redux, SCSS applications",
    "scripts": {
      "dev": "webpack-dev-server --config ./webpack/webpack-dev.config.js --watch --colors",
      "build": "rm -rf dist && webpack --config ./webpack/webpack-prod.config.js --colors",
      "start": "PORT=8080 node start ./server.js",
      "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
      "test:watch": "npm run test -- --watch",
      "lint": "eslint src test webpack"
    },
    "keywords": [
      "ExpressJS",
      "ReactJS",
      "Redux",
      "React hot loader",
      "React Router",
      "SCSS",
      "Webpack Devevelopment configuration",
      "Webpack Production configuration",
      "Airbnb Eslint",
      "pm2",
      "mocha",
      "chai"
    ],
    "repository": {
      "type": "git",
      "url": "git+https://github.com/DimitriMikadze/express-react-redux-starter"
    },
    "author": "Dimitri Mikadze",
    "license": "MIT",
    "devDependencies": {
      "autoprefixer": "^6.4.0",
      "autoprefixer-loader": "^3.2.0",
      "babel-core": "^6.8.0",
      "babel-loader": "^6.2.4",
      "babel-preset-es2015": "^6.6.0",
      "babel-preset-react": "^6.5.0",
      "babel-preset-stage-1": "^6.5.0",
      "chai": "^3.5.0",
      "chai-jquery": "^2.0.0",
      "css-loader": "^0.23.1",
      "eslint": "^2.10.2",
      "eslint-config-airbnb": "^9.0.1",
      "eslint-plugin-import": "^1.8.0",
      "eslint-plugin-jsx-a11y": "^1.2.0",
      "eslint-plugin-react": "^5.1.1",
      "extract-text-webpack-plugin": "^1.0.1",
      "html-webpack-plugin": "^2.16.1",
      "jquery": "^2.2.3",
      "jsdom": "^9.0.0",
      "mocha": "^2.4.5",
      "node-sass": "^3.7.0",
      "react-addons-test-utils": "^15.0.2",
      "react-hot-loader": "^1.3.0",
      "sass-loader": "^3.2.0",
      "style-loader": "^0.13.1",
      "url-loader": "^0.5.7",
      "webpack-dev-server": "^1.14.1"
    },
    "dependencies": {
      "classnames": "^2.2.5",
      "express": "^4.13.4",
      "lodash": "^4.15.0",
      "react": "^15.0.2",
      "react-dom": "^15.0.2",
      "react-redux": "^4.4.5",
      "react-router": "^2.4.0",
      "redux": "^3.5.2",
      "webpack": "^1.13.0"
    }
}

What am I doing incorrectly to get this deployed? Works great on my localhost. But cannot figure out how to get this up into the world for the life of me. Many thanks!

Solution 1

Ok -- this has to do with devDependencies vs. Dependencies in package.json Also, by setting the Heroku config to NPM_CONFIG_PRODUCTION: false I was able to resolve this. Thx internet!

Solution 2

As others have said, Heroku runs node as production NODE_ENV=production, which means your devDependencies don't get installed. Heroku provides node specific build hooks though. I use heroku-prebuild to run npm install --dev, which installs all dependencies and devDependencies.

"scripts": {
  ...,
  "heroku-prebuild": "npm install --dev",
  ...
},

Running your app NOT in production mode should probably be avoided. Often developers have "dev mode" specific code that will get filtered out when running in production. Plus if you're doing things a webpack build you definitely want to be in production mode to take advantage of minification, uglifying, etc.

Here's the details from Heroku.

Sometimes, developers need something more production-oriented than the preinstall and postinstall hooks in package.json. For instance, some apps need to set up extra authentication before installing dependencies. Some need to build assets, but not in a development environment. Further examples can be found in the discussion on GitHub.

Node.js developers can now use heroku-prebuild and heroku-postbuild hooks to tailor the build process to their apps.

https://devcenter.heroku.com/changelog-items/844

Solution 3

This happens because heroku by default doesn't install dev Dependencies of package.json, we need to exculsively tell heroku (npm) to install our dev dependencies (webpack is in dev), so running this command should solve the "not found issue"

.

npm install --dev

Solution 4

What's causing this is devDependencies are not installed. You overcome this by typing the following command in your project's root dir:

heroku config:set NPM_CONFIG_PRODUCTION=false

Then, the next time you deploy your app your issue should be resolved.

Solution 5

This is what it worked for me https://github.com/rails/webpacker/issues/512

heroku buildpacks:add --index 1 heroku/nodejs

View more solutions

Comments

[mdcuesta]

NPM_CONFIG_PRODUCTION: false, why would you do this? By default heroku will install dependencies and not devDependencies. Also webpack dev server is not meant for production.

[ivarni]

This is a much better solution.

[Jason Allshorn]

heroku config:set NPM_CONFIG_PRODUCTION=false is the syntax for this suggestion.

[SomethingOn]

Though that will install the devDependencies, deploying the app NOT in production might lead to other issues. What really needs to happen is you need to tell heroku to install the devDependencies which can be done using their heroku-prebuild script in your package.json file (see my answer).

[SomethingOn]

Yes @thisismydesign, it goes in the "scripts" section of package.json

[dobhareach]

Spend 2.5 hours to check and double check, until realized that webpack was devDependencies so after push to slug it was pruned and nothing was builld. Thanks a lot.

[DanielM]

Heroku's documentation states "By default, Heroku will install all dependencies listed in package.json under dependencies and devDependencies." (devcenter.heroku.com/articles/…) Is this outdated or simply wrong?

[html_programmer]

Although it doesn't make much sense still. You don't want dev-dependencies in production, you just want to run webpack.

[Daniele Cencig]

@DanielM According to my tests, it seems like that piece of doc is true for the main folder. Assume having server code at root with express and babel. In deployment, all deps are installed and the server compiles succesfully. The problem appears when you switch folder to do another install + build (like `cd client && npm install && npm run build). This is the case where the install goes against the docs and installs only production deps. Adding the --dev flag did fix the issue for me; check out my repo here for a practical example.

[jakenberg]

Its answers like this one that make sure I'll always have a job in security :')

[jakenberg]

DO NOT DO THIS. Many dev dependencies become vulnerabilities in production.

[jakenberg]

DO NOT DO THIS. Many dev dependencies become vulnerabilities in production.

[chanchal118]

This solved my issue as well when I updated Rails 4.2.8 to 6.1.4