HMR (Hot reload) not working

[Melbourneandrew]

Vue version

3.2.13

Link to minimal reproduction

https://github.com/Melbourneandrew/vue-hmr-broken

Steps to reproduce

Project files:
https://github.com/Melbourneandrew/vue-hmr-broken

Vue info output:

Environment Info:

  System:
    OS: macOS 12.5
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
  Binaries:
    Node: 16.3.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 7.15.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Edge: Not Found
    Firefox: 84.0.2
    Safari: 15.6
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  5.0.8 
    @vue/babel-preset-jsx:  1.3.1 
    @vue/babel-sugar-composition-api-inject-h:  1.3.0 
    @vue/babel-sugar-composition-api-render-instance:  1.3.0 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.3.0 
    @vue/babel-sugar-v-on:  1.3.0 
    @vue/cli-overlay:  5.0.8 
    @vue/cli-plugin-babel: ~5.0.0 => 5.0.8 
    @vue/cli-plugin-eslint: ~5.0.0 => 5.0.8 
    @vue/cli-plugin-router:  5.0.8 
    @vue/cli-plugin-vuex:  5.0.8 
    @vue/cli-service: ~5.0.0 => 5.0.8 
    @vue/cli-shared-utils:  5.0.8 
    @vue/compiler-core:  3.2.37 
    @vue/compiler-dom:  3.2.37 
    @vue/compiler-sfc:  3.2.37 
    @vue/compiler-ssr:  3.2.37 
    @vue/component-compiler-utils:  3.3.0 
    @vue/reactivity:  3.2.37 
    @vue/reactivity-transform:  3.2.37 
    @vue/runtime-core:  3.2.37 
    @vue/runtime-dom:  3.2.37 
    @vue/server-renderer:  3.2.37 
    @vue/shared:  3.2.37 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^8.0.3 => 8.7.1 
    vue: ^3.2.13 => 3.2.37 
    vue-eslint-parser:  8.3.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  17.0.0 (15.10.0)
    vue-style-loader:  4.1.3 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 5.0.8

What is expected?

When I do npm run serve I am expecting a dev environment where upon saving changes to the project files, the changes are promptly reflected in the localhost:8080 browser window.

I am also expecting the browser console to read
[HMR] Waiting for update signal from WDS...
upon page load, and
reload
upon hot reload.

What is actually happening?

Whenever I save changes to the project files, the npm run serve process recompiles the code but the browser does not show a reload message and it takes 10-15s before the changes are reflected in the browser.

I also note that when the page loads, the [HMR] Waiting for update signal from WDS... is not displayed.

System Info

System:
    OS: macOS 12.5
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Memory: 10.78 GB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.3.0 - /usr/local/bin/node
    npm: 7.15.1 - /usr/local/bin/npm
    Watchman: 2021.06.07.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 103.0.5060.134
    Firefox: 84.0.2
    Safari: 15.6
  npmPackages:
    vue: ^3.2.13 => 3.2.37

Any additional comments?

I have tried reinstalling @vue/cli several times and have used vue create to make several new projects and the issue still persists.

[jaytonic]

I'm encountering a similar issue.
With this repo: https://github.com/jaytonic/helloworld

1. Just run npm install and npm run serve
2. open the main page
3. edit something, like the "Email" to something else.

You can see the console recompiling, but the content stay the same. If I refresh the page, it works again.

here is my envinfo if it helps:

  System:
    OS: Windows 10 10.0.22621
    CPU: (20) x64 Intel(R) Core(TM) i9-10850K CPU @ 3.60GHz
    Memory: 11.33 GB / 31.86 GB
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.12.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.819.0), Chromium (107.0.1418.24)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vue: ^3.2.13 => 3.2.45 

[zhangzhonghe]

I'm encountering a similar issue. With this repo: https://github.com/jaytonic/helloworld

1. Just run npm install and npm run serve
2. open the main page
3. edit something, like the "Email" to something else.

You can see the console recompiling, but the content stay the same. If I refresh the page, it works again.

here is my envinfo if it helps:

  System:
    OS: Windows 10 10.0.22621
    CPU: (20) x64 Intel(R) Core(TM) i9-10850K CPU @ 3.60GHz
    Memory: 11.33 GB / 31.86 GB
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.12.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.819.0), Chromium (107.0.1418.24)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vue: ^3.2.13 => 3.2.45 

After some hard debugging, I found that the new vnode generated after the HMR is exactly the same as the old vnode, which is why the page does not update after the HMR. So it's not a bug in vue core.

Also, your project is using @vue/cli and not Vite.

[jaytonic]

Hi @zhangzhonghe ,
Thank you for the debugging! I'm quite new to Vue, so I'm not sure what you mean by "not a bug in vue core" ?

Yes, it's a project created with vue cli. But I've the same project with Vite and the same issue occurs(which I initially reported here: vitejs/vite-plugin-vue#3 ). What should I do?

[zhangzhonghe]

Hi @zhangzhonghe , Thank you for the debugging! I'm quite new to Vue, so I'm not sure what you mean by "not a bug in vue core" ?

Yes, it's a project created with vue cli. But I've the same project with Vite and the same issue occurs(which I initially reported here: vitejs/vite-plugin-vue#3 ). What should I do?

The minimal reproduction of your issue is here.

Vue does not currently support HMR with this modification. Would you be willing to reopen an issue to help us document this if you can, thanks!

[jaytonic]

Hi @zhangzhonghe , Thank you for the debugging! I'm quite new to Vue, so I'm not sure what you mean by "not a bug in vue core" ?
Yes, it's a project created with vue cli. But I've the same project with Vite and the same issue occurs(which I initially reported here: vitejs/vite-plugin-vue#3 ). What should I do?

The minimal reproduction of your issue is here.

Vue does not currently support HMR with this modification. Would you be willing to reopen an issue to help us document this if you can, thanks!

I can, but I'm not sure to understand the benefit of creating another issue than this one?

[zhangzhonghe]

Whenever I save changes to the project files, the npm run serve process recompiles the code but the browser does not show a reload message and it takes 10-15s before the changes are reflected in the browser.

What @Melbourneandrew said is that it takes a long time for the page to update, which is different from what you said about not updating. And the minimal reproduction he provided does not reproduce the issue he described. @jaytonic

[jaytonic]

Whenever I save changes to the project files, the npm run serve process recompiles the code but the browser does not show a reload message and it takes 10-15s before the changes are reflected in the browser.

What @Melbourneandrew said is that it takes a long time for the page to update, which is different from what you said about not updating. And the minimal reproduction he provided does not reproduce the issue he described. @jaytonic

Done: #7155
Thanks for the help!