Subscribe on changes!

HMR (Hot reload) not working

can't reproduce
avatar
Melbourneandrew
Aug 1st 2022

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.

1
avatar
jaytonic
Nov 13th 2022

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
avatar
zhangzhonghe
Nov 14th 2022

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.

avatar
jaytonic
Nov 14th 2022

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: https://github.com/vitejs/vite-plugin-vue/issues/3 ). What should I do?

avatar
zhangzhonghe
Nov 15th 2022

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!

avatar
jaytonic
Nov 15th 2022

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?

avatar
zhangzhonghe
Nov 16th 2022

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

avatar
jaytonic
Nov 16th 2022

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: https://github.com/vuejs/core/issues/7155 Thanks for the help!

GitHub Track