Vue cli 3 hot reload suddenly not working in browsers

I have a Vue project generated by the Vue cli 3 and my hot reloading suddenly stopped working in my browsers. Changes made to the code are still picked up by the terminal, however, my browser is not picking up the changes. I have to manually refresh in order to pick up the new changes. As suggested by some others I manually set poll: true in my vue.config.js and I also tried to set the proxy, but both had no success.

Any suggestions to make this work again?

Update:

After some Vue updates, it suddenly started working again. I still don't know the reason for this. It might have been a bug in the vue-cli?

My problem was WDS
Console displayed:

[HMR] Waiting for update signal from WDS...
[WDS] Disconnected!
GET http://ip:port/sockjs-node/info?t=some-number
net::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.

What was the cause in my case:

It seems that the value of: max_user_watches in the /proc/sys/fs/inotify/max_user_watches is affecting webpack => which is interfering with hot reloading.

To check your actual value

$cat /proc/sys/fs/inotify/max_user_watches
16384

16384 was in my case and it still wasnt enough.

I tried different type of solutions like:

$ echo fs.inotify.max_user_watches=100000 | sudo tee -a /etc/sysctl.conf
$ sudo sysctl -p

But it seems that even if I changed the value, when I restarted my PC it would go back to default one 16384.

SOLUTION if you have Linux OS(my case, I have Manjaro):

Create the file:

sudo nano /etc/sysctl.d/90-override.conf

And populate it with:

fs.inotify.max_user_watches=200000

It seems 200000 is enough for me.

After you create the file and add the value, just restart the PC and you should be ok.