Deploying a React/Webpack app

Deploying a React/Webpack app
0

#1

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)
       
       > [email protected] 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! [email protected] postinstall: `webpack -p`
       npm ERR! spawn ENOENT
       npm ERR!
       npm ERR! Failed at the [email protected] 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.


#2

Have you looked into the React buildpack for Heroku?

Heroku has some extra deployment steps for some setups.


#3

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: