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?

About this issue

Original URL
State: open
Created 8 years ago
Reactions: 4
Comments: 15

Most upvoted comments

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
    }
}));

+12

nozzlegear on Nov 3, 2016

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,
    },
  }

pastelsky on Dec 2, 2016

I had the same error message, and realized that target: 'node' was set in my webpack config accidentally. Taking that out fixed it like a charm.

kgroat on Dec 26, 2017

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?

bonesoul on Jun 1, 2017

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

rchristensen on Oct 28, 2016

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/