Webpack-dev-server: WDS stops at "[WDS] App hot update..."

[wojtekmaj]

• Operating System: Windows
• Node Version: 8.9.0
• NPM Version: 5.5.1
• webpack Version: 3.1.0
• webpack-dev-server Version: 2.9.5

• [ ] This is a bug
• [ ] This is a feature request
• [ ] This is a modification request
• [x] This is crying for help

Hello,
I'm trying to configure WebpackDevServer and I can't seem to be able to do it. My logs look like so:

[WDS] App updated. Recompiling...
[WDS] App hot update...

and then nothing happens. I figured that the last thing that get executed is:

      // broadcast update to window
      self.postMessage('webpackHotUpdate' + currentHash, '*');

and HMR doesn't seem to do anything with it.

Code

  // webpack.config.js

  name: 'browser',
  entry: [
    'babel-polyfill',
    './src/client/main.js',
  ],
  output: {
    path: path.join(__dirname, 'dist', 'public'),
    filename: `client-bundle.js`,
    publicPath: PUBLIC_ASSETS_URL
  },
  resolve: {
    modules: [
      path.resolve(__dirname, 'src'),
      'lib',
      'node_modules',
    ],
    extensions: ['.js', '.scss'],
  },

(...)

  if (HOT) {
    // Put HMR patches just before ./src/client/main.js
    config.entry.splice(
      config.entry.length - 1, 0,
      'event-source-polyfill', // For development on Internet Explorer
      'webpack-dev-server/client?' + HOT_LOADER_URL,
    );

    // Put HMR patches in JS files loader
    config.module.rules[0].options = {
      cacheDirectory: true,
      presets: ['react-hmre'],
    };

    config.plugins.push(
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin()
    );
  }

  // hot-server.js

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var fs = require('fs');

var config = require('../../webpack.config-client');
var consts = require('../consts');

const {
  HOT_LOADER_HOST,
  HOT_LOADER_PORT,
  HOT_LOADER_URL,
  PUBLIC_ASSETS_URL,
} = consts;

const compiler = webpack(config);

const options = {
  contentBase: HOT_LOADER_URL,
  publicPath: PUBLIC_ASSETS_URL,
  noInfo: true,
  hot: true,
  https: true,
  key: fs.readFileSync('fixtures/dev/keys/key.pem'),
  cert: fs.readFileSync('fixtures/dev/keys/cert.pem'),
  headers: {
    'Access-Control-Allow-Origin': '*',
  }
};

new WebpackDevServer(compiler, options).listen(HOT_LOADER_PORT, HOT_LOADER_HOST, function (err) {
  if (err) {
    console.error(error);
    return;
  }
  console.info(`==> Listening on port ${HOT_LOADER_PORT}. Open up ${HOT_LOADER_URL} in your browser.`);
});

I have tried:

• setting publicPath consisting of HOT_LOADER_URL + PUBLIC_ASSETS_URL
• setting hot flag in hot-server.js to false to avoid duplication of HotModuleReplacementPlugin, but that resulted in HMR refreshing the page instead of hot applying stuff
• setting inline flag to true
• using WebpackDevServer.addDevServerEntrypoints(config, options); to apply entrypoints
• adding `'webpack/hot/dev-server' to the list of entry points manually
• adding or removing react-hmre preset
• disabling event-source-polyfill
• using ['env', { modules: false }] or not
• downgrading Webpack to 3.8.x

Here's what gets pushed through WebSocket on a single update:

Any ideas on what I might be doing wrong? I'm hopeless at this point :(

[wojtekmaj]

What makes me wonder, I may have two hot servers started at the same time, judging by the messages that are shown in the console. Does WDS have any mechanism to prevent such things from happening?

[shellscape]

I'd recommend starting with one of the examples, like hmr and slowly applying your changes to the config and code, incrementally testing to make sure it works along the way. That may take a bit, but you'll likely avoid some wall-head contact and the problem should reveal itself relatively quickly. Issues like these are almost always related to a plugin/config or a whacky environment problem.

As we hold everyone to, we ask that folks head to Stack Overflow or the Webpack GItter for support questions. Please give one of those a try. We don't leave questions as open issues in this repo, but if you happen to find an edge case bug that we can address, please ping directly and we'll reopen to resolve.

[kinkoazc]

Just for reference, in my case the culprit was a "manually" installed "webpack" node module(I say "manually" because webpack was already a required dependency for another module-@angular/cli-). Removing the "manually" installed dependency allowed @angularclass/hmr module to work as expected with @angular/cli.