Deploying a React/Webpack app

Hi all,

trying to deploy a webpack/react app to heroku and getting this error form Heroku on build:

-----> Building dependencies
       Installing node modules (package.json + package-lock)
       
       > scms@1.0.0 postinstall /tmp/build_a3a45f108c3b2f93159bfe0327b5005c/Swoodend-mCMS-00231c3
       > webpack -p
       
       sh: 1: webpack: not found
       npm ERR! file sh
       npm ERR! code ELIFECYCLE
       npm ERR! errno ENOENT
       npm ERR! syscall spawn
       npm ERR! scms@1.0.0 postinstall: `webpack -p`
       npm ERR! spawn ENOENT
       npm ERR!
       npm ERR! Failed at the scms@1.0.0 postinstall script.
       npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
       
       npm ERR! A complete log of this run can be found in:
       npm ERR!     /app/.npm/_logs/2017-09-27T04_39_14_699Z-debug.log
-----> Build failed

My package.json looks as follows:

{
  "name": "scms",
  "version": "1.0.0",
  "description": "A simple content management system built with React, Node, MongoDB",
  "main": "index.js",
  "engines": {
    "node": "8.1.3"
  },
  "browserslist": [
    "> 1%",
    "ie > 8"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack-p",
    "dev": "webpack-dev-server",
    "start": "node server/server.js",
    "postinstall": "webpack -p"
  },
  "author": "Swoodend",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "postcss-loader": "^2.0.6",
    "style-loader": "^0.18.2",
    "webpack-dev-server": "^2.8.2",
    "webpack": "^3.6.0"

  },
  "dependencies": {
    "express": "^4.15.4",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.2.2"
  }
}

So, what I believe is happening…when Heroku attemps to run my postinstall command it can’t find webpack. I’ve noticed that when I try to run webpack from the command line the command isn’t found. To get around this I tried doing "postinstall": "npm run webpack" but the same error is thrown.

When I moved webpack from devDependencies to a dependency, the build got PAST webpack and then through the error babel: command not found so I believe one “fix” for this would be installing all my dev dependencies on heroku (which hardly feels like a solution).

Can anyone highlight what is going wrong here? Quite confused.

Thanks all.

Have you looked into the React buildpack for Heroku?

Heroku has some extra deployment steps for some setups.

Hi @JacksonBates,

I have used create-react-app for deployment with past projects but with this one I was hoping to set up the application myself to learn the basics of webpack, webpack-dev-server, etc. Everything is working fine on my local machine but I can’t get Heroku to cooperate. Deployment is always such a pain :confounded: