Vue-cli: HMR stopped working after updating to 3.2.0

[mornir]

Version

3.2.0

Environment info

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
  Binaries:
    Node: Not Found
    Yarn: Not Found
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    @kazupon/vue-i18n-loader: ^0.3.0 => 0.3.0
    @vue/babel-preset-app:  3.2.0
    @vue/cli-overlay:  3.2.0
    @vue/cli-plugin-babel: ^3.2.0 => 3.2.0
    @vue/cli-plugin-e2e-cypress: ^3.2.0 => 3.2.0
    @vue/cli-plugin-eslint: ^3.2.1 => 3.2.1
    @vue/cli-service: ^3.2.0 => 3.2.0
    @vue/cli-shared-utils:  3.2.0
    @vue/component-compiler-utils:  2.3.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    babel-plugin-transform-vue-jsx:  4.0.1
    cypress-vue-unit-test: ^1.11.0 => 1.11.0
    eslint-plugin-vue:  4.7.1
    vue: ^2.5.18 => 2.5.18
    vue-cli-plugin-i18n: ^0.5.1 => 0.5.1
    vue-confetti: ^0.4.2 => 0.4.2
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.1
    vue-i18n: ^8.4.0 => 8.4.0
    vue-loader:  15.4.2
    vue-router: ^3.0.2 => 3.0.2
    vue-socket.io-extended: ^3.2.0 => 3.2.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.18 => 2.5.18
    vue-template-es2015-compiler:  1.6.0
    vuex: ^3.0.1 => 3.0.1
    vuex-persistedstate: ^2.5.4 => 2.5.4

Steps to reproduce

I'm encountering the same issue as https://github.com/vuejs/vue-cli/issues/2892

@sodatea I saw that you fixed this issue in that commit.

But in this commit, you bumped the webpack version to 4.26.1.

Could this be the reason of my issue? However everything works fine in a freshly created Vue project...

What is expected?

HMR to be working

What is actually happening?

HMR is not working

[sodatea]

Please manually update @cypress/webpack-preprocessor to 4.x, they have now made webpack a peer dep but shipped as a new major version.

[mornir]

Hi! Thanks for the quick reply 👍
It seems that this error is related to the cypress-vue-unit-test package that I am using. There's a pending pull request to update @cypress/webpack-preprocessor: https://github.com/bahmutov/cypress-vue-unit-test/pull/148

[iKnowMagic]

I had the same issue; HMR was not working after creating a fresh project with vue create, vue-cli version 3.2.1.
I solved it by adding the entry disableHostCheck: true to vue.config.js like this:

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

The issue is probably related to https://github.com/webpack/webpack-dev-server/issues/1604 .

[createdbyjurand]

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
:)

[jafri]

Thank you @createdbyjurand

[oswaldofreitas]

in my case I can't change it to localhost, this is my config:

devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: true,
    proxy: 'https://www.mydomain.com/',
    public: 'https://hmr.mydomain.com',
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },

[oswaldofreitas]

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