HMR doesn't work for components that aren't rendered yet (vue-router)

[onx2]

Describe the bug

HMR doesn't update a component that isn't rendered on the screen, but will work once the file is saved and the component is rendered already.

Reproduction

1. Install vue router (next -- 4.0.0-alpha.11)
2. Create two views
3. Run Vite dev server (everything on screen will update as expected)
4. Modify a view that isn't visible, then navigate to that view
5. See the changes you made not reflected until the file is saved again and visible on screen.

Vite log shows that HMR was triggered though: [vite:hmr] src/views/Home.vue updated. (reload)

System Info

• required vite version: 0.14.2
• required Operating System: Ubuntu 18
• required Node version: 13.14.0
• Optional:
  • npm/yarn version: yarn v1.22.4
  • Installed vue version (from yarn.lock or package-lock.json): 3.0.0-beta.12
  • Installed @vue/compiler-sfc version: 3.0.0-beta.12

Logs (Optional if provided reproduction)

Screenshot of the error

[SpeakInCode]

@onx2 did you find a fix for this? This issue is still happening on:

vue: 3.0.0
vue-router: 4.0.0-beta.12
@vue/compiler-sfc: 3.0.0,
vite: 1.0.0-rc.4

[onx2]

@SpeakInCode No it doesn't seem to work. I have noticed that if you haven't navigated to a route yet, but make an update it will work. Once you've navigated to the route, HMR doesn't work for it unless it is rendered on the screen or you save again after navigating. I'll re-open this since I'm not the only one having trouble.

My deps:

"dependencies": {
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-beta.13"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.0",
    "vite": "^1.0.0-rc.4",
  }

[Splinterjke]

@onx2 We are playing with the next deps:

"dependencies": {
    "@vueuse/core": "^4.0.0-beta.40",
    "balm-ui": "^9.0.2",
    "vue": "^3.0.2",
    "vue-router": "^4.0.0-rc.2"
},
"devDependencies": {
    "@vue/compiler-sfc": "^3.0.2",
    "sass": "^1.29.0",
    "typescript": "^4.0.5",
    "vite": "^1.0.0-rc.9"
}

We do not expirience the issue you described above. But seems like we do have a similar one. I've noticed the HMR stops refreshing once any router-view has been visited/rendered. Not sure about the issue comes from vue-router nor HMR.
To be precise: after visiting router-view the only one next update is handled by HMR and then it stops until the page is manually refreshed. It's caused on changing any components that out of router-view or inside of it, but the showstopper there is the entire router navigation gets broken (router-view components is not (re) rendered anymore).

[yyx990803]

Closing stale bugs for 1.x. If the issue persists in 2.0, please open a new issue with proper reproduction.

[Splinterjke]

In addition to my comment above - the issue has been resolved by fixing url to main.ts in index.html, it has to start with /. not ./. So people may have the dot in projects created from some 3rd party vue3 templates.