Router data lost after HMR when script was changed.

Describe the bug

When changing script part of component that references router parameter HMR works but all router data is empty.

Reproduction

<template>
  <div>
     {{ id }}
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
const id = String(router.currentRoute.value.params.id)
console.log('page -', id)
</script>

npm run dev

if I change something in script part, for example console.log(‘page -’, hid) to console.log(‘The page id is -’, id) and press save then ID is undefined after HMR.

if I change template part, for example {{ id }} to ID - {{ id }} I see changes on a page after HMR and ID is shown as expected.

Is it intended behavior or is it a bug?

System Info

Package                                 Current        
@typescript-eslint/eslint-plugin         4.33.0        
@typescript-eslint/parser                4.33.0        
@vue/eslint-config-typescript             7.0.0        
axios                                    0.21.4        
eslint                                   7.32.0        
eslint-plugin-prettier                    3.4.1        
eslint-plugin-vue                        7.20.0        
vue                                      3.2.23        
vue-i18n                          9.2.0-beta.22  
vue-router                               4.0.12 
vue-tsc                                   0.3.0  


--------
{
  "name": "vite",
  "version": "0.0.0",
  "scripts": {
    "dev": "cp html/dev-index.html index.html && vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview",
    "build:client": "vite build --outDir build/client",
    "build:server": "vite build --outDir build/server --ssr src/server.js",
    "pro": "cp html/pro-index.html index.html && npm run build:client && npm run build:server"
  },
  "dependencies": {
    "@vuelidate/core": "^2.0.0-alpha.26",
    "@vuelidate/validators": "^2.0.0-alpha.22",
    "axios": "^0.21.4",
    "ol": "^6.8.1",
    "serialize-javascript": "^6.0.0",
    "vue": "^3.2.16",
    "vue-i18n": "^9.2.0-beta.11",
    "vue-router": "^4.0.11",
    "xstate": "^4.25.0"
  },
  "devDependencies": {
    "@types/node": "^16.10.2",
    "@typescript-eslint/eslint-plugin": "^4.32.0",
    "@typescript-eslint/parser": "^4.32.0",
    "@vitejs/plugin-vue": "^1.9.2",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-vue": "^7.18.0",
    "prettier": "^2.4.1",
    "sass": "^1.42.1",
    "typescript": "^4.4.3",
    "vite": "^2.6.0",
    "vue-tsc": "^0.3.0"
  }
}

Used Package Manager

npm

Logs

no errors just undefined router data

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[Shinigami92]

We have 500+ open issues and only a small team of core contributors. A reproduction helps us all so that someone can just quickly jump into the problem and then try to tackle the issue. If someone first needs to always reproduce it on their own and than multiple people do this, it is just a waste of time and effort. To create a reproduction also showed in the history that then someone saw that it was another issue on their own codebase or misunderstanding the docs or somewhat and then the issue was resolved.

So please do us all this small effort from your side and we are all more happy to help you with your issue.

And if you like, feel free to help and contribute also into the codebase and therefore help many users and the contributors of vite. That’s how Open Source works.

[RollingTL]

What a formal answer to an issue. I already provided minimal reproduction. You can easily reproduce it yourself on any Vite + Vue 3 project. Anyway you can just ignore issue as usual on a pretext of lack of minimal reproduction.