Subscribe on changes!

Vite + Vue 3 HMR runtime error

avatar
Nov 3rd 2022

Vue version

3.2.41

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-rm74vp?file=src/App.vue

Steps to reproduce

Just try to edit non tag-wrapped text inside template

What is expected?

HMR will work well, edited text will stay actual

What is actually happening?

Runtime error

TypeError: Cannot set properties of null (setting 'nodeValue')
    at setText (vue.js?v=b62a0db1:7310:20)
    at processText (vue.js?v=b62a0db1:5245:9)
    at patch (vue.js?v=b62a0db1:5207:9)
    at patchKeyedChildren (vue.js?v=b62a0db1:5795:9)
    at patchChildren (vue.js?v=b62a0db1:5755:11)
    at processFragment (vue.js?v=b62a0db1:5498:9)
    at patch (vue.js?v=b62a0db1:5220:9)
    at ReactiveEffect.componentUpdateFn [as fn] (vue.js?v=b62a0db1:5675:9)
    at ReactiveEffect.run (vue.js?v=b62a0db1:388:19)
    at instance.update (vue.js?v=b62a0db1:5710:52)
    

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    vue: ^3.2.41 => 3.2.41

Any additional comments?

The bug is clearly related to the fact that the template uses variables obtained asynchronously. In my case - joke

avatar
Nov 4th 2022

Seems to be a duplicate of #6852. Note the current direct use of Text as a child of Fragment is problematic.

@posva @edison1105 The problem has been feedback from many people, hope to increase the priority.

avatar
Nov 4th 2022

@zhangzhonghe thanks. close as duplicated.