How to run webpack-dev-server `--hot` with custom server so live-reload works

[akoidan]

• Operating System: Archlinux
• Node Version: 10.10.0
• NPM Version: 6.4.1
• webpack Version: 4.20.2
• webpack-dev-server Version: 3.1.9

Expected Behavior

On editing files browser should automatically refresh the page

Actual Behavior

Browser logs nothing updated:

main.js:1 [WDS] Warnings while compiling.
warnings @ main.js:1
i.onmessage @ main.js:1
n.dispatchEvent @ main.js:1
(anonymous) @ main.js:1
_._transportMessage @ main.js:1
i.emit @ main.js:1
ws.onmessage @ main.js:1
main.js:1 configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
warnings @ main.js:1
i.onmessage @ main.js:1
n.dispatchEvent @ main.js:1
(anonymous) @ main.js:1
_._transportMessage @ main.js:1
i.emit @ main.js:1
ws.onmessage @ main.js:1
main.js:1 [WDS] App hot update...
main.js:1 [HMR] Checking for updates on the server...
main.js:1 Ignored an update to unaccepted module 27 -> 4
e.exports @ main.js:1
onUnaccepted @ main.js:1
S @ main.js:1
(anonymous) @ main.js:1
Promise.then (async)
t @ main.js:1
(anonymous) @ main.js:1
r.emit @ main.js:1
x @ main.js:1
warnings @ main.js:1
i.onmessage @ main.js:1
n.dispatchEvent @ main.js:1
(anonymous) @ main.js:1
_._transportMessage @ main.js:1
i.emit @ main.js:1
ws.onmessage @ main.js:1
main.js:1 [HMR] The following modules couldn't be hot updated: (They would need a full reload!)
e.exports @ main.js:1
e.exports @ main.js:1
(anonymous) @ main.js:1
Promise.then (async)
(anonymous) @ main.js:1
Promise.then (async)
t @ main.js:1
(anonymous) @ main.js:1
r.emit @ main.js:1
x @ main.js:1
warnings @ main.js:1
i.onmessage @ main.js:1
n.dispatchEvent @ main.js:1
(anonymous) @ main.js:1
_._transportMessage @ main.js:1
i.emit @ main.js:1
ws.onmessage @ main.js:1
main.js:1 [HMR]  - 27
e.exports @ main.js:1
(anonymous) @ main.js:1
e.exports @ main.js:1
(anonymous) @ main.js:1
Promise.then (async)
(anonymous) @ main.js:1
Promise.then (async)
t @ main.js:1
(anonymous) @ main.js:1
r.emit @ main.js:1
x @ main.js:1
warnings @ main.js:1
i.onmessage @ main.js:1
n.dispatchEvent @ main.js:1
(anonymous) @ main.js:1
_._transportMessage @ main.js:1
i.emit @ main.js:1
ws.onmessage @ main.js:1
main.js:1 [HMR] Nothing hot updated.
main.js:1 [HMR] App is up to date.

Code

const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
module.exports = {
    plugins: [
      new HtmlWebpackPlugin({template: "src/index.html"}),
      new webpack.HotModuleReplacementPlugin(),
    ],
  entry: [
    'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  output: {
    publicPath: "/"
  },
}

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Listening at http://localhost:3000/');
});

How Do We Reproduce?

• git clone https://github.com/Deathangel908/webpack-dev-server-isssue
• yarn install
• node server.js
• open in browser http://localhost:3000 and open devtools
• edit file src/index.js and save it, browser page should update automatically

[glenjamin]

This is the repo for webpack-hot-middleware it has nothing to do with webpack-dev-server I'm afraid.

[akoidan]

@glenjamin I'm afraid it's webpack-hot-middleware issue since I use webpack.HotModuleReplacementPlugin(), please see the comment webpack/webpack-dev-server#1519

[glenjamin]

Then you should have mentioned that in the initial report!

The response on the dev server issue is slightly misleading. The suggestion isn't that the issue lies with hot-middleware, the suggestion is to change your project setup to use this module instead - which the example hasn't done.

I don't think this would make much difference though.

The key lines in the log output is probably these ones:

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

main.js:1 Ignored an update to unaccepted module 27 -> 4

The first one means that you're defaulting to production mode, which isn't going to help make debugging any easier.

The second one is telling you which module failed to process the hot-update process, but because you're in production mode you're getting module numbers instead of helpful module names.

---

It's likely that the problem is that your client code has not been updated to handle hot reloading.

Try following this guide for help: https://webpack.js.org/guides/hot-module-replacement/

[akoidan]

I end up with adding to every entry file the construction bellow:

if (module['hot']) {
  module['hot'].accept();
}