Vue cli 3 hot reload suddenly not working in browsers

Question

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?

Schizophyceous

Is the socket running correctly in your browser? Check the network inspector, are there errors? – Peyton

Sockets are working. Call /sockjs-node/info?t=1543826222341 returns 200 OK. – Schizophyceous

If you inspect the socket, do you see the call coming back from the socket server with the reload message and some information about the code replacement? – Peyton

I only see the socket call once with the following request: {"websocket":true,"origins":["*:*"],"cookie_needed":false,"entropy":2916256970}. So changes made to my code does not produce new socket calls – Schizophyceous

I have the same problem. Using quasar vue-3. Everything was fine but suddenly the live update of chrome stop working and I need to refresh after every change in component. Tried all the suggested solutions but none worked for me... also upgrade quasar's version. Any other suggest? – Pt

Answer 1

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

:)

Meat

Great find, this worked for me! Any idea why, though? – Composite

I don't have a 'serve' property. – Limitative

I've already found out how to fix it but your answer is even more complete +1 Thanks! – Unstrung

This also fixes hot reloading when running a VPN or SSH tunnel – Paedo

This one only "serve": "vue-cli-service serve --host localhost" worked for me on Windows 10, @vue/cli version 4.5.8. The vue.config.js option did not. – Hannie

For anyone else trying out this fix, please note that you need to close + reopen / reload your browser tab for the new changes to take effect. After you do that, hot reloads should work. :) – Jameljamerson

VueJS3 haven't the second option, and the first option are returning error in console trying to get the 'ip'. Both doesn't resolve. ;( – Doralynn

Hot reload broke for me when I added vue-cli-service serve --https true so we could debug using HTTPS locally. Adding --host localhost fixed hot reloading when using HTTPS! – Dulcine

this work for me, thanks ! vue 3.0.0 – Keciakeck

Answer 2

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.]

Consecutive

I added devServer: { watchOptions: { poll: true } } to my vue.config.js, but it's still not working. – Schizophyceous

I can understand you it is the problem that stuck many people, but I would like to glad you in build/dev-server.js:21 the code upper I put in my answer try may be it help you – Consecutive

I'm working on windows and even with the added watch options to my config, it doesn't work, unfortunately. – Schizophyceous

multiple webpack problem there is may be – Consecutive

No, not yet. I tried creating a new Vue project through the CLI 3 and hot reloading works there. I'm trying to figure out the differences. – Schizophyceous

You can see difference with npm list webpack command.I created a new app with vue create without Cypress (which is part of the multiple webpack problem) and HMR works just fine now. – Consecutive

if you have some question about this it is the webpack problem with nested working – Consecutive

Reinstalling @vue/cli-service didn't work for me, unfortunately. It would be nice if vue-cli would warn you about these problems indeed. – Schizophyceous

Answer 3

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.

Particularity

Thanks! What it actually means, is that instead of opening localhost:8080 one should open 127.0.0.1:8080. We used to think that these two addresses are the same, but it might not be the case for web socket connections. My problem was with Mac Safari browser and now it's solved. – Gaff

Answer 4

I also have this WDS issue with each Vue project I make (kind of annoying, even with latest vue cli 4.5.0 and vue 2.6.11).

So the following solution is what I copy paste each and every time.

In vue.config.js file :

module.exports = {
  devServer: {
    // Fixing issue with WDS disconnected and sockjs network error
    host: '0.0.0.0',
    public: '0.0.0.0:8080',
    disableHostCheck: true,
    // End of fix
  }
}

Ferroelectric

I'm working with Vue 2.5, and my Safari lost the hot reloading on macOS. The flag disableHostCheck: true fixed the issue for me. Thank you, @Ferroelectric – Collette

Answer 5

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.

Oldest

Answer 6

Maybe this can help https://webpack.js.org/configuration/watch/#changes-seen-but-not-processed

"Verify that you have enough available watchers in your system. If this value is too low, the file watcher in Webpack won't recognize the changes:"

cat /proc/sys/fs/inotify/max_user_watches

"On macOS, folders can get corrupted in certain scenarios. See this article."

And in the link above you can check other known issues.

Banville

Answer 7

set NODE_ENV=development might solve your problem.

Vogeley

Answer 8

Adding NODE_ENV=development to your .env file will solve the problem.

Vessel

Answer 9

I tried almost all the other 15 solutions here. But none of them worked for me turns out it was something totally unexpected

I found this on their documentation

Symlinks

If you are using any of these, Hot Reload won't work

• npm link
• yarn link
• pnpm
• cnpm

Demise

My issue was that I was using pnpm install. I then used the command pnpm install --shamefully-hoist. Hot reload started working seamlessly. – Demise

Answer 10

I hope that this could be helping someone, I'd used of the terminal in my WebStorm and vue-cli-service didn't work, then I opened a normal terminal and that's it, maybe something in WebStorm didn't let the correct way in the vue-cli-service

Randy

You were right. Seems to work just fine from Terminal.app, but not from WebStorm Integrated Terminal. Don't have time to investigate why but at least I can confirm. – Clothing

Answer 11

I used proxy extension in my Firefox browser. Try turning that off if you have one

Krummhorn

This answer from @createdbyjurand should allow you to keep running proxy connections and have hot reloading work – Paedo

Answer 12

Please make sure you don't have any error in your code. This happens usually because of error in any of our code files.

Fourdimensional

Answer 13

You can run vue-cli-service serve --public localhost

According the docs:

--public specify the public network URL for the HMR client

https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve

This was my problem anyway, HMR was running on the network IP instead, for some reason. Causing CORS and connection refused issues.

Sump

Answer 14

For me More Tools >> Clear Browsing data in Chrome did the trick. Also try incognito before.

In Firefox everything was fine.

So before editing your vue.config.js take a look at the browsers.

Greathearted

Answer 15

I solved this problem by changing the versions of my dependencies and devDependencies:

"dependencies": {
   "core-js": "^3.4.4",
   "vue": "^2.6.10",
 },
 "devDependencies": {
   "@vue/cli-plugin-babel": "~4.1.0",
   "@vue/cli-plugin-eslint": "~4.1.0",
   "@vue/cli-service": "~4.1.0",
   "babel-eslint": "^10.0.3",
   "eslint": "^5.16.0",
   "eslint-plugin-vue": "^5.0.0",
   "vue-template-compiler": "^2.6.10"
 },

Minos

It is all about this line: "@vue/cli-service": "~4.1.0" But recently I have realized that command: npm install -g @vue/cli-init solves the problem without changing anything manually in the package.json – Denverdeny

Answer 16

Just run

npm install -g @vue/cli-init

Filariasis

Please add some explanation to your answer such that others can learn from it – Tacket