Webpack-hot-middleware: 'Hot Reloading" not working on Ubuntu w/ React and Express but it works on Windows

[dylanfpaul]

I have run into a very frustrating problem where my webpack-hot-middleware is not 'hot reloading'. It is building the project, and rebuilding the project whenever I make any edits to any of my files in question but it seems to never show any changes and always displays my files prior to the edits made to them (almost like it is caching them or something). I am using an Express server as well and am very new to all of this. I actually am trying to setup a development environment using files that were handed to me from an employer and am having a hard time trying to figure out how to solve this.

My package.json runs these scripts:

"scripts": {
"postinstall": "npm run prod",
"prod": "webpack --config ./webpack.prod.config.js",
"start": "node ./app_build.js"
 }

After an "npm install", it seems to run this file "webpack.prod.config.js":

const path = require('path');
const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'source-map',

  entry: './main.js',

  output: {
    path: path.join(__dirname,'prod'),
    filename: 'bundle.js',
    publicPath: '/'
  },

  plugins:[
      new webpack.DefinePlugin({
          'process.env':{
              NODE_ENV: JSON.stringify('production'),
          }
      }),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        compress:{
          warnings:false
        }
      }),
      new ExtractTextPlugin('bundle.css'),
      new webpack.IgnorePlugin(/^(buffertools)$/) //Remove deeper dependancy for react-jsonschema-forms error
  ],

  module: {
    loaders: [
      { test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react'] }},
      { test: /\.css?$/,
        loader: ExtractTextPlugin.extract('style', 'css')},
      { test: /\.less$/,
        loader: 'style!css!less' },
      { test: /\.(png|jpg|gif)$/,
        loader: 'url-loader?limit=100000' },
        {
            test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=application/font-woff"
        }, {
            test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=application/font-woff"
        }, {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=application/octet-stream"
        }, {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            loader: "file"
        }, {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=image/svg+xml"
        }
    ]
  }
};

An "npm start" runs "app_build.js" which looks like this:

const Server = require('./server.js');
const port = (process.env.PORT || 3333);
const app = Server.app();
const stormpath = require('express-stormpath');
const path = require('path');
var helpers = require('express-stormpath/lib/helpers');
var uuid = require('node-uuid');
var requestProxy = require('express-request-proxy');
var btoa = require('btoa');
var session = require('express-session');
var request = require('request');
var bodyParser = require('body-parser');
var Mailgun = require('mailgun-js');
request = request.defaults({jar:true});

const CONSTANTS  = require('./src/constants/Constants');


//console.log('version: '+ process.env.NODE_ENV);

if (process.env.NODE_ENV !== 'production') {
    const webpack = require('webpack');
    const webpackDevMiddleware = require('webpack-dev-middleware');
    const webpackHotMiddleware = require('webpack-hot-middleware');
    const config = require('./webpack.dev.config.js');
    const compiler = webpack(config);

    app.use(webpackHotMiddleware(compiler));
    app.use(webpackDevMiddleware(compiler, {
        noInfo: true,
        publicPath: config.output.publicPath
    }))
    console.log(`Listening at http://localhost:${port}`);
}

There is more to this file but I believe my problem has something to do with my publicPath or something, I am not entirely sure. Like I said, I was handed this configuration from a previous developer and I am totally new to all of this and just want to get this up and running ASAP. Any help is appreciated. It is important to note that the previous developer who handed me these files was using Windows and this configuration seems to working for him.

[glenjamin]

Nothing jumps out at me as being obviously wrong here.

It's configured to have two modes - prod and non-prod. npm run prod builds a static bundle for deployment purposes ./prod/bundle.js.

In dev mode you'll use npm start to run the development server, you should then get a local express server on http://localhost:3333 which has hot-reloading enabled. You should be able to get some information about what's going on by looking in the JS console for when loading the local dev page.

If you're not getting hot-reloads applied when saving files please report back with the logging from the dev server, the js console and the contents of .babelrc.

[dylanfpaul]

Thank you, okay, now I need to figure out how to log all of that. I am completely new to this and am trying to setup a development environment using these files. I will report back when I have some of those logs.

[dylanfpaul]

Would you mind giving me some direction on how to log all the needed info?

[glenjamin]

The info is all logged by default - you should see output in the same console as you ran npm start, and output in the javascript console in the browser.

[dylanfpaul]

So I finally figured out the issue. This may have been obvious to some more experienced linux users, but I needed to use "sudo npm start" instead of just "npm start". Also, I needed to make sure that my packages were installed with "sudo npm install" not just "npm install". I am guessing the sudo permissions give the middle ware appropriate access to watch for file changes.

[glenjamin]

That shouldn't be required unless something inside your project has been previously created with sudo.

You might be able to reset things by recursively resetting permissions inside the project folder

sudo chown -R `whoami`: .

[neftaly]

I had this issue too, but the suggestion in #75 seemed to fix it:

echo 100000 | sudo tee /proc/sys/fs/inotify/max_user_watches

[disarticulate]

Same fix as neftaly

Installed Ubuntu 18 Bionic Beaver and the max_user_watches must've been reset.

[abhijit-padhy]

Try adding -- --reset-cache to your run command.
*for Linux OS

Ref:
https://www.reddit.com/r/reactnative/comments/8mlelt/hot_reloadinglive_reload_stopped_working_how_do_i/

[danielskun]

I also installed Ubuntu 18.04 Bionic Beaver, upgrading from 16.04. After that, I start to have this hot reload issue.

For me to fix this issue, I had to both execute:

echo 100000 | sudo tee /proc/sys/fs/inotify/max_user_watches

And then launch my run command using "-- --reset-cache"