React/webpack application deploy fails on heroku

0
votes

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)

2
reactjsheroku
Did you try reinstalling it? 'npm uninstall webpack-dev-server --save && npm install webpack-dev-server --save' - Nahuel

2 Answers

0
votes

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)
0
votes

web-dev-server is meant to be used only in development mode. Use "serve" instead.

  1. Do npm install serve --save or yarn add serve -D

  2. 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