webpack-hot-middleware [HMR] Cannot find update (Full reload needed)

I apologise if this has been submitted before, but I am running into problems with HMR. I am trying to implement HMR in my framework and thought it was working until recently. Now whenever the modules are updated, the HMR reloads the page indefinitely. The error output is below:

[HMR] Cannot find update (Full reload needed)
[HMR] (Probably because of restarting the server)
[HMR] Reloading page

I am using a slightly out of the ordinary setup: browsersync as my server, webpack for js compilation and my config is below:

Browsersync/HMR setup

/**
 * gulp serve
 * Gulp task to run Browsersync server
 */
const path = require('path');
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('../config');
const webpackConfig = require('./webpack.config.js');
const compiler = webpack(webpackConfig);

gulp.task('serve', ['watcher'], () => {
    webpackConfig.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    );

    for (const key in config.js.entryPoints) {
        config.js.entryPoints[key].push('webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true');
    }

    browserSync.init({
        server: {
            baseDir: './',
        },

        middleware: [
            webpackDevMiddleware(compiler, {
                stats: 'errors-only',
                publicPath: path.resolve(webpackConfig.output.publicPath),
            }),
            webpackHotMiddleware(compiler),
        ],

        files: [
            `${config.css.distDir}/**/*.css`,
            // `${config.js.distDir}/**/*.js`,
            `${config.img.distDir}/**/*`,
            `${config.svg.distDir}/**/*`,
            '**/*.html',
        ],
    });
});

Webpack config

/**
 * Webpack config
 */
const path = require('path');
const webpack = require('webpack');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const config = require('../config');

const webpackConfig = {
    entry: config.js.entryPoints,
    output: {
        path: path.resolve(`${config.js.distDir}`),
        publicPath: '/',
        filename: '[name].js',
    },
    devServer: {
        inline: true,
        port: 3000,
        stats: 'errors-only',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                //exclude: /node_modules/,
                loader: 'babel',
                query: {
                    // presets: [
                    //  'es2015',
                    // ],
                    cacheDirectory: true,
                },
            },
        ],
    },
    devtool: 'source-map', // Source maps
    plugins: [
        // Watcher doesn't work well if you mistype casing in a path so we use
        // a plugin that prints an error when you attempt to do this.
        // See https://github.com/facebookincubator/create-react-app/issues/240
        new CaseSensitivePathsPlugin(),
    ],
};

if (process.env.RELEASE) {
    webpackConfig.plugins.push(
        new webpack.optimize.DedupePlugin(),

        // Minify the code using Uglify
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
            output: {
                comments: false,
            },
        }),

        new webpack.BannerPlugin(config.misc.banner, {
            raw: true,
        })
    );
}

module.exports = webpackConfig;

Am I doing anything obviously wrong?

Oct 22 '16 20:10 mrmartineau

It looks like you have config in there for both webpack-dev-server and webpack-hot-middleware, which cannot both be used together.

I'm not entirely sure that's the problem - but try removing the devServer section from the webpack config.

Oct 23 '16 02:10 glenjamin

Apologies for hijacking, but I'm having the same issue only with express. My relevant code in server.js:

// If developing on a local machine, use webpack-dev-middleware to provide auto-reloading assets
if (process.env.AUTO_BUILD == true) {
    const config = require('./webpack.config.dev');
    const compiler = webpack(config);

    app.use(require('webpack-dev-middleware')(compiler, {
        noInfo: true,
        publicPath: config.output.publicPath,
        stats: { colors: true }
    }))

    app.use(require ('webpack-hot-middleware')(compiler, {
        log: console.log,
        reload: true
    }))
}

app.use('/', express.static(__dirname + '/'));

My webpack config:

const webpack = require('webpack');
const path = require('path');

require('dotenv').config();

module.exports = {
    target: 'node',
    entry: [
        'react-hot-loader/patch',
        'webpack-hot-middleware/client',
        ${path.join(__dirname, 'index.js')},
        ],
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/dist',
        filename: 'bundle.js'
    },
    devtool: process.env.NODE_ENV === 'production' ? false : "eval",
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
    module: {
        loaders: [
            {
                test: /\.scss$/,
                include: /src/,
                loaders: [
                    'style',
                    'css',
                    'autoprefixer?browsers=last 3 versions',
                    'sass?outputStyle=expanded'
                ]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'url?limit=8192',
                    'img'
                ]
            },
            {
                test: /\.jsx?$/,
                exclude: '/node_modules/',
                loaders: [ 'babel' ]
            }, {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }

};

Console output:

[HMR] connected
client.js:127 [HMR] bundle rebuilding
client.js:131 [HMR] bundle rebuilt in 713ms
process-update.js:29 [HMR] Checking for updates on the server...
process-update.js:39 [HMR] Cannot find update (Full reload needed)cb @ process-update.js:39(anonymous function) @ bundle.js:210hotDownloadManifest @ bundle.js:11hotCheck @ bundle.js:206check @ process-update.js:65module.exports @ process-update.js:30processMessage @ client.js:142handleMessage @ client.js:66
process-update.js:40 [HMR] (Probably because of restarting the server)cb @ process-update.js:40(anonymous function) @ bundle.js:210hotDownloadManifest @ bundle.js:11hotCheck @ bundle.js:206check @ process-update.js:65module.exports @ process-update.js:30processMessage @ client.js:142handleMessage @ client.js:66

Oct 28 '16 12:10 rchristensen

@rchristensen Does the server restart after changes?

Oct 28 '16 13:10 glenjamin

@glenjamin It doesn't seem to? Console output:

Express server listening on port 3000
webpack built 7856f8a4727533a33ad5 in 13231ms
webpack building...
webpack built 94c6b0b9eb9cd4f2fb85 in 793ms
webpack building...
webpack built 44d5a3e90920c7d75c73 in 713ms

Oct 28 '16 13:10 rchristensen

That's odd, I'd double-check your publicPath setting, the part which is failing is when webpack attempts to download the manifest from webpack-dev-middleware - which isn't something directly managed by this package.

Oct 28 '16 13:10 glenjamin

Alright, that helps, thanks for the insight!

Oct 28 '16 13:10 rchristensen

For what it's worth, my issue was using target: node instead of target: web, not sure if it'll help OP but worth a shot.

Oct 31 '16 00:10 rchristensen

I just ran into this issue too. In my case it was because my publicPath option for webpack-dev-middleware ended with a trailing slash. Removing that fixed the problem for me.

app.use(require('webpack-dev-middleware')(compiler, {
    publicPath: "/dist", // Do not end publicPath with a / 
    watchOptions: {
        poll: true
    },
    stats: {
        colors: true
    }
}));

Nov 03 '16 14:11 nozzlegear

I'm facing a very similar issue. As soon as I start the server, I get:

GET http://localhost:4000/public/fe242263d0577251a5c3.hot-update.json 404 (Not Found)
[HMR] Cannot find update (Full reload needed)
[HMR] (Probably because of restarting the server)

I'm using write-file-plugin for webpack, and the funny thing is, that this missing hot-update.json file won't be generated until after I've made my first edit in any component. Somehow the request seems to go out before, leading to the 404.

Notably, all successive HMR updates work fine just fine.

Hot middleware

// Hot middleware config
hotMiddleware(compiler, {
    log: false,
  }

Dev middleware

// Dev middleware config
devMiddleware(compiler, {
    watchOptions: {
      ignored: /node_modules/,
    },
    stats: {
      colors: true,
      assets: true,
      version: false,
      hash: false,
      timings: true,
      chunks: false,
      chunkModules: false,
    },
  }

Dec 02 '16 04:12 pastelsky

@pastelsky I'm not 100% sure, but try removing the false entries from your stats options - I think some of those are needed by hot middleware.

Jan 04 '17 08:01 glenjamin

I' having the same issue;

webpack.config;

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

module.exports = {
  entry: {
    frontend: ['./assets/js/frontend/frontend.js', 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000'],
    backend: ['./assets/js/backend/backend.js', 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000']
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './public/dist'),
    publicPath: '/dist/'
  },
  module: {
    rules: [
      { test: require.resolve('jquery'), use: [{ loader: 'expose-loader', options: '$' }] }, // globally expose $ for jQuery.
      { test: /mixer\.js$/, use: [{ loader: 'expose-loader', options: 'recipeMixer' }] },
      { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader'] }) }, // extra css files.
      { test: /\.(jpe?g|gif|png|eot|svg|woff|woff2|ttf)$/, use: 'file-loader' }, // font & image loader.
      //{ test: /\.js$/, include: [ path.resolve(__dirname, 'assets/js') ], use: [{ loader: 'babel-loader', options: { presets: ['es2015'] }, }], }, // es6 babel loader.
    ]
  },
  resolve: {
    modules: [ 'node_modules' ],
    alias: { jquery: require.resolve('jquery') }
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'common.js' }), // commons.
    new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true }), // extract css.
    new webpack.ProvidePlugin({ $: 'jquery', jquery: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', 'window.$': 'jquery' }), // provide jquery.
    new webpack.IgnorePlugin(/\.\/locale$/), // Fixes warning in moment-with-locales.min.js; Module not found: Error: Can't resolve './locale' in ...
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
  devtool: 'source-map'
};

middlewares;

const webpack = require('webpack');
const config = require('../../../webpack.config.js');
const dev = require('webpack-dev-middleware');
const hmr = require('webpack-hot-middleware');
const compiler = webpack(config);

exports.compiler = function () {
  return dev(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
  });
};

exports.hmr = function () {
  return hmr(compiler);
};

browser output;

[HMR] Cannot find update (Full reload needed)
[HMR] (Probably because of restarting the server)
GET https://localhost:4443/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING

express server output;

webpack built 736e2ec083f3707a4a39 in 6148ms
GET /dist415bd7e4ec4eb6daa42b.hot-update.json 404 99.006 ms - -

i clearly get a 404 there.

any ideas?

Jun 01 '17 10:06 bonesoul

Hello, guys! When we tried to "proxying" our local server with browserSync we got the same bug. As a result, the page was reloading all the time - issue

We used Wordpress, so the solution that prevents reloading is to change publicPath: publicPath: http://localhost:8080/wp-content/themes/THEME_NAME/assets/js/

webpack-hot-middleware webpack-hot-middleware copied to clipboard

[HMR] Cannot find update (Full reload needed)

Browsersync/HMR setup

Webpack config

Hot middleware

Dev middleware

webpack-hot-middleware
webpack-hot-middleware copied to clipboard