React/webpack application deploy fails on heroku - reactjs

Question

I am trying to deploy my react starter on heroku. I have written the webpack file and it works on my localhost but as I deploy on heroku it throws a run time error of:
Cannot find module '../lib/util/addDevServerEntrypoints'
My stacktrace looks like
Error: Cannot find module '../lib/util/addDevServerEntrypoints'
2017-03-28T11:56:47.036328+00:00 app[web.1]: at Function.Module._resolveFilename (module.js:469:15)
2017-03-28T11:56:47.036329+00:00 app[web.1]: at Function.Module._load (module.js:417:25)
2017-03-28T11:56:47.036329+00:00 app[web.1]: at Module.require (module.js:497:17)
2017-03-28T11:56:47.036330+00:00 app[web.1]: at require (internal/module.js:20:19)
2017-03-28T11:56:47.036330+00:00 app[web.1]: at Object. (/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:9:33)
2017-03-28T11:56:47.036331+00:00 app[web.1]: at Module._compile (module.js:570:32)
2017-03-28T11:56:47.036331+00:00 app[web.1]: at Object.Module._extensions..js (module.js:579:10)
2017-03-28T11:56:47.036332+00:00 app[web.1]: at Module.load (module.js:487:32)
2017-03-28T11:56:47.036333+00:00 app[web.1]: at tryModuleLoad (module.js:446:12)
2017-03-28T11:56:47.036333+00:00 app[web.1]: at Function.Module._load (module.js:438:3)

Answer 1

I have faced similar problems while deploying my app in heroku.
It's best to write a node express server that serves public folder to deploy your app rather than using webpack-dev-server.
Node express server can be easily created like following.
const express = require('express')
const path = require('path')
const app = express()
app.use(express.static(path.resolve(__dirname,'dist')
app.listen(process.env.PORT || 8080)

Answer 2

web-dev-server is meant to be used only in development mode. Use "serve" instead.
Do npm install serve --save or yarn add serve -D
Add the following scripts to your package.json
"scripts": {
"start": "serve -s dist",
"dev": "webpack-dev-server --mode development --inline --open --hot",
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Before deployment run, npm build, or yarn build for the Webpack to generate your static files. Then push normally to Heroku. Once the deployment build succeeds, Heroku runs the start script. This way it would use "serve" to serve you static files created in the dist folder. So you use Webpack-dev-server for dev purpose and "serve" in production. Either way serving the dist folder files through node also works. Cheers