Vue cli 3 hot reload suddenly not working in browsers

My problem was WDS
Console displayed:

[HMR] Waiting for update signal from WDS...[WDS] Disconnected!GET http://ip:port/sockjs-node/info?t=some-numbernet::ERR_CONNECTION_TIMED_OUT sockjs.js?some-number

Solution for me was:
in

package.json

change

"serve": "vue-cli-service serve",

to

"serve": "vue-cli-service serve --host localhost",

or
add

module.exports = {  devServer: {    host: 'localhost'  }}

to

vue.config.js

:)

HMR has problems in various environments, in those situations you can maybe help yourself with the poll option:

https://github.com/vuejs-templates/webpack/blob/develop/template/config/index.js#L21

var devMiddleware = require('webpack-dev-middleware')(compiler, {  publicPath: webpackConfig.output.publicPath,  stats: {    colors: true,    chunks: false  },  watchOptions: {    aggregateTimeout: 300,    poll: 1000  }})

Seems I finally found it: my $cat /proc/sys/fs/inotify/max_user_watches was on 8192 and this helped me:

echo 100000 | sudo tee /proc/sys/fs/inotify/max_user_watches

Now Vue hot reload works without sudo and without poll ! ))))

One failure mode I've come across here is if you've managed to end up with multiple installations of webpack in your node_modules.

The reload relies on these two bits of code emitting events to each other:

webpack-dev-server/client/index.js    var hotEmitter = require('webpack/hot/emitter');    hotEmitter.emit('webpackHotUpdate', currentHash);webpack/hot/dev-server.js    var hotEmitter = require("./emitter");    hotEmitter.on("webpackHotUpdate", function(currentHash) {

However, if you have multiple webpacks installed (e.g. a top-level one and one under @vue/cli-service) the require will resolve the first to ./node_modules/webpack/hot/emitter.js and the second to ./node_modules/@vue/cli-service/node_modules/webpack/hot/emitter.js which aren't the same object and so the listener never gets the event and reloads fail.

To resolve this I just uninstalled and reinstalled @vue/cli-service which seemed to clear the package-lock.json and resolve to the single top-level webpack.

I don't know if there's any way to ensure this doesn't happen -- however, it might be possible for vue-cli-3 to spot the situation and at least log a warning in dev mode?

[BTW adding devServer: { clientLogLevel: 'info' } } to vue.config.js was really helpful in debugging this.]

I faced the same issue (the console showed an error that said "[WDS] Disconnected") and here's what I did. Note that I was using the Vue UI tool for managing my project and I did not edit any config files.

1. Under Tasks/serve, I stopped the task.
2. I clicked the parameters button and in the input for "Specify host" label, I added the IP of my localhost i.e. 127.0.0.1 and in the input for "Specify port" label, I added 8080.
3. I saved the parameters and ran the server again from the tool.

Not sure why but this seemed to work for me. I'd love if someone can explain why it works.