Subscribe on changes!

vue 热更新问题

avatar
Nov 5th 2022

Vue version

3.2.41

Link to minimal reproduction

https://sfc.vuejs.org/#eNplUsFq20AQ/ZVhL3YglnqtYgf6Af0DXVR7bStIK7G7Ul2ModSlxq3btBCKEzuHFgq9xEkhDXLr4p/Rytapv9CRJbmBgNDuMO/N25l5ffLE97UwoMQgddHkti/BsVinYRIpTALHJrNd3+MS+uCxp17AJG0dAqdtGECbey6YBNkmOTKZyWhvB23RthU4SDEZgKAy8KsHeQDQ9JiQ4FIhrA6FRlapWqkc5Mm9QhUJjeOSAyVeCy0nyFgVy6rkuUFB5SjD2QNGAcoO/OFX14susTOMJHV9x5I0DwHqLTsEIV84FCfge8KWtscMrI4gO6RHXWp3utJ4/Mjv4XTCmqQ9ichSjYCOhQDU/Pt2fZ6OJurNeRy9jH/N4mi+/baGzes79fFDMhnH60t1Nf27mkD65Wd6+XUzvEpmt8nnG3XzI15dJPNx8namVq9UFAEyEJEO/8TRe8ztoTul5V0cnSXTa5Tc/P6kFhfqdJqOTqFfvGkA8fIdViiQ8XqRnC3VYphJJ+OsnrpebUe3/x+Qi+6nsWuorhfXbIL3h0YOSW6Qmmv52onwGDpptwWzSKCNjHIvhVkMvHSl9IWh66LdzPx3IjSPd3S8aRwtYLtUo8KtPePec0E5FjZJuUQy+AcfHCh9

Steps to reproduce

随便创建一个ref变量, 然后修改它

const message = ref('')
    onMounted(() => {
      message.value = 'aa'
    })

之后修改它绑定的组件 比如

 <div> {{  message  }}</div>  ( 比如在这里写一些东西 保存)

在组件后面写一些东西 然后按保存, 页面就会报错

TypeError: Cannot set properties of null (setting 'nodeValue')
    at setText (runtime-dom.esm-bundler.js:30:14)
    at processText (runtime-core.esm-bundler.js:5109:17)
    at patch (runtime-core.esm-bundler.js:5064:17)
    at patchKeyedChildren (runtime-core.esm-bundler.js:5849:17)
    at patchChildren (runtime-core.esm-bundler.js:5792:21)
    at processFragment (runtime-core.esm-bundler.js:5472:17)
    at patch (runtime-core.esm-bundler.js:5078:17)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5695:17)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
    at instance.update (runtime-core.esm-bundler.js:5729:56)
runtime-core.esm-bundler.js:562 [HMR] Something went wrong during Vue component hot-reload. Full reload required.

What is expected?

应该正常热更新

What is actually happening?

但是并没有 而且抛了异常 TypeError: Cannot set properties of null (setting 'nodeValue')

System Info

System:
    OS: Linux 5.15 KDE neon 5.26 5.26
    CPU: (8) x64 Intel(R) Core(TM) i5-9300H CPU @ 2.40GHz
    Memory: 8.24 GB / 19.37 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 16.18.0 - ~/Soft/LinuxSoft/node-v16.18.0-linux-x64/bin/node
    Yarn: 1.22.19 - ~/Soft/LinuxSoft/node-v16.18.0-linux-x64/bin/yarn
    npm: 8.19.2 - ~/Soft/LinuxSoft/node-v16.18.0-linux-x64/bin/npm
  Browsers:
    Chrome: 107.0.5304.68
    Firefox: 106.0.2

Any additional comments?

在playground中没发现问题, 在本地运行vite才有 项目依赖如下

{
  "name": "a",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit"
  },
  "dependencies": {
    "pinia": "^2.0.23",
    "vue": "^3.2.41",
    "vue-router": "^4.1.5"
  },
  "devDependencies": {
    "@types/node": "^16.11.68",
    "@vitejs/plugin-vue": "^3.1.2",
    "@vue/tsconfig": "^0.1.3",
    "npm-run-all": "^4.1.5",
    "typescript": "~4.7.4",
    "vite": "^3.1.8",
    "vue-tsc": "^1.0.8"
  }
}
avatar
Nov 6th 2022

Open a new issue if you manage to reproduce it. Thanks!