Webpack-hot-middleware: HMR client not starting

Created on 24 May 2016 · 25Comments · Source: webpack-contrib/webpack-hot-middleware

Hi, I'm wondering if I can get some help with debugging an issue I have with HMR?

My machine is Windows 10 and my project uses webpack-dev-middleware and webpack-hot-middleware, based on this boilerplate: https://github.com/choonkending/react-webpack-node/

If I pull a fresh copy of that repo, HMR works exactly as it should, so the problem appears to be something I've added or changed, but I'm having trouble figuring out what that is.

In my project (https://github.com/ReallySmall/react-node-stackduino), the server side of HMR appears to still be working as expected. if I go to /__webpack_hmr I see the heartbeat - and whenever I update code I see that change reflected at /__webpack_hmr and in my cmd window I get the 'webpack built' notification.

However in my Chrome console I don't see any HMR activity at all - none of the usual messages to say HMR is initialised, connected or updated. The console remains blank. So HMR is all happening in the background, but the front end client isn't initialising.

Are there any common reasons why the HMR client would fail to start?

Thanks in advance for any help.

Cheers
Richard

awaiting-input

Source

ReallySmall

Most helpful comment

Hi,

This strange bug had happened to me too. I'm using Windows 10 on two different machines and the same setup works on an older and slower PC and it doesn't work on a new and much powerful laptop.

I found that when starting the server with:

app.listen(3000, 'localhost', function (err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Server is running at http://localhost:3000');
});

the /__webpack_hmr endpoint stays in pending mode and after a few seconds it's cancelled.

If I remove the 'localhost' part:

app.listen(3000, function (err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Server is running at http://localhost:3000');
});

... it works as expected on both machines.

I can reproduce it with this repo: https://github.com/knowbody/react-boilerplate, which has a very simple setup. By reproducing I mean, it works on the PC but not on the laptop, unless I remove the host parameter.

Hope it helps,
Raul.

raulmatei on 4 Jun 2016

👍2

All 25 comments

This seems to be happening to a bunch of people, most commonly on Windows.

I've never been able to reproduce it myself, so info you can provide is much appreciated!

Can you see anything in the network tab of chrome related to /__webpack_hmr ? When you said you went to that URL and saw the heartbeat, was that in the browser or via something like curl?

There might be some stuff you can try in #36

glenjamin on 24 May 2016

Viewing /__webpack_hmr either through cURL or the browser directly I see the same thing - the heartbeat, or the 'patch content' as soon as I change any code. As far as I can tell that appears to be working correctly.

I don't see anything in the network tab related to /__webpack_hmr.

If I include a conditional if(module.hot) in my code, this never gets executed, suggesting something is amiss - but I'm not sure what reasons what cause that not to be the case? It's tricky to debug as there are no errors :)

ReallySmall on 24 May 2016

Ah, interesting - can you share your webpack.config.js - it sounds like you might be missing the client entrypoint

glenjamin on 24 May 2016

Here it is:

var path = require('path');
var webpack = require('webpack');
var assetsPath = path.join(__dirname, '..', 'public', 'assets');
var hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true';

console.log('dev client config in use');

var commonLoaders = [
  {
    /*
     * TC39 categorises proposals for babel in 4 stages
     * Read more http://babeljs.io/docs/usage/experimental/
     */
    test: /\.js$|\.jsx$/,
    loader: 'babel',
    // Reason why we put this here instead of babelrc
    // https://github.com/gaearon/react-transform-hmr/issues/5#issuecomment-142313637
    query: {
      "presets": ["react-hmre", "es2015", "react", "stage-0"]
    },
    include: path.join(__dirname, '..', 'app'),
    exclude: path.join(__dirname, '/node_modules/')
  },
  {
    test: /\.(png|jpg|jpeg|gif|svg)$/,
    loader: 'url',
    query: {
        name: '[hash].[ext]',
        limit: 10000,
    }
  },
  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff'
  },
  {
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file-loader'
  },
  { test: /\.html$/, 
    loader: 'html-loader' 
  }
];

var postCSSConfig = function() {
  return [
    require('postcss-import')({
      path: path.join(__dirname, '..', 'app', 'css'),
      // addDependencyTo is used for hot-reloading in webpack
      addDependencyTo: webpack
    }),
    require('postcss-simple-vars')(),
    // Unwrap nested rules like how Sass does it
    require('postcss-nested')(),
    //  parse CSS and add vendor prefixes to CSS rules
    require('autoprefixer')({
      browsers: ['last 2 versions', 'IE > 8']
    }),
    // A PostCSS plugin to console.log() the messages registered by other
    // PostCSS plugins
    require('postcss-reporter')({
      clearMessages: true
    })
  ];
};

module.exports = {
    // eval - Each module is executed with eval and //@ sourceURL.
    devtool: 'eval',
    // The configuration for the client
    name: 'browser',
    /* The entry point of the bundle
     * Entry points for multi page app could be more complex
     * A good example of entry points would be:
     * entry: {
     *   pageA: "./pageA",
     *   pageB: "./pageB",
     *   pageC: "./pageC",
     *   adminPageA: "./adminPageA",
     *   adminPageB: "./adminPageB",
     *   adminPageC: "./adminPageC"
     * }
     *
     * We can then proceed to optimize what are the common chunks
     * plugins: [
     *  new CommonsChunkPlugin("admin-commons.js", ["adminPageA", "adminPageB"]),
     *  new CommonsChunkPlugin("common.js", ["pageA", "pageB", "admin-commons.js"], 2),
     *  new CommonsChunkPlugin("c-commons.js", ["pageC", "adminPageC"]);
     * ]
     */
    context: path.join(__dirname, '..', 'app'),
    // Multiple entry with hot loader
    // https://github.com/glenjamin/webpack-hot-middleware/blob/master/example/webpack.config.multientry.js
    entry: {
      app: ['./client', hotMiddlewareScript]
    },
    output: {
      // The output directory as absolute path
      path: assetsPath,
      // The filename of the entry chunk as relative path inside the output.path directory
      filename: '[name].js',
      // The output path from the view of the Javascript
      publicPath: '/assets/'
    },
    module: {
      loaders: commonLoaders.concat([
        { test: /\.css$/,
          loader: 'style!css!postcss-loader'
        }
      ])
    },
    resolve: {
      extensions: ['', '.js', '.jsx', '.css'],
      modulesDirectories: [
        'app', 'node_modules'
      ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
          __DEVCLIENT__: true,
          __DEVSERVER__: false
        }),
        new webpack.ProvidePlugin({ 
          $: 'jquery', 
          jQuery: 'jquery'
        })
    ],
    postcss: postCSSConfig
};

It's more or less the same as the boilerplate version: https://github.com/choonkending/react-webpack-node/blob/master/webpack/webpack.config.dev-client.js, except I've added a few additional loaders.

Does anything look obviously amiss?

ReallySmall on 24 May 2016

That all looks fine, if you open up the bundle in a text editor can you see the HMR client code?

Does it show up in the browser debugger? Can you put a breakpoint around the point it tries to connect to the server?

glenjamin on 24 May 2016

Sorry - which bundle?

I've verified that the reference to client.js is correct in my project. I also added a console.log to the top of that file, which doesn't appear on run - so it does appear that the client isn't getting bundled.

ReallySmall on 24 May 2016

The bundle produced by webpack.

I can't see any reason that would fail quietly - it should either blow up because it can't find hot-middleware, or work.

glenjamin on 24 May 2016

I was afraid you were going to say that :D

Another oddity is the app.js bundle is minified, when really it shouldn't be. Starting to wonder whether my problem is related to environment variables...