vue 热更新问题
Vue version
3.2.41
Link to minimal reproduction
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"
}
}