HMR (Hot module reload) not working with vue cli 3

[vinaybedre]

Version

3.0.0-rc.10

Node and OS info

Node 8.11.2 / Yarn 1.7.0 / Windows 10

Steps to reproduce

• git clone https://github.com/vinaybedre/vue-cli-3-hmr-bug
• yarn install
• npm start serve
• Open server at http://localhost:8080/about
• Do changes to any src file eg. under views/About.vue change the text
• Under browser's console, I get error Failed to load resource: net::ERR_CONNECTION_TIMED_OUT
• HMR is not working as expected and mentioned

What is expected?

HMR should update the browser's content based on changes made on src file

What is actually happening?

HMR is failing, any changes done to the src files are not being hot reloaded in browser.

[vjoao]

Can not reproduce. @vue/cli 3-rc.10 on Linux Mint 19 && zsh.
HMR works flawlessly.

[blitheinsz]

i have the same problem in win10

[yyx990803]

Cannot reproduce on Windows 10 with a fresh install from RC10.

[Cycododge]

I was having the same issue. Please ensure that NODE_ENV=development.

[vinaybedre]

using cross_env and setting NODE_ENV worked. Thanks

[season19840122]

@Cycododge Where is Vue Cli 3 set?

[Cycododge]

@season19840122 I'm not sure if I completely understand your question. I installed it with npm install -g @vue/cli, and run my app with npm run dev that actually calls npm i --only=dev --no-audit && npm i --only=prod && cross-env NODE_ENV=development vue-cli-service serve --open.

[season19840122]

@Cycododge Yes, I am sure. I am developing using the dev environment, this is no problem. So the problem is not here.

[yzhengaq]

got the same problem.
though in chrome console it print the messsage '[HMR] Waiting for update signal from WDS...' but it is still not working when i am changing my src file.
anyone had a solution?

[yzhengaq]

find a solution here #1559
remove node_modules and reinstall through npm instead of cnpm and the problem solved!

[season19840122]

@yzhengaq You're right!

[akett]

Here's another solution, add this under exports.devServer in vue.config.js

watchOptions: {
      poll: true
}

https://webpack.js.org/configuration/dev-server/#devserverwatchoptions-

[ellakan]

//vue.config.js
devServer: {
proxy: 'http://localhost:8080',
public: '10.190.81.79:8080',
}
set the public url