Hot module reload causing error or not updating.

[nholtman]

Vue version

v3.5.24

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-xavxdftq?file=src%2FApp.vue

Steps to reproduce

Step 1: press on the increment button
Step 2: change This text in the .vue file
Step 3: The text should update but does not.

What is expected?

The text saying: This text should update to the new text you replaced it with.

What is actually happening?

I don't know why it doesn't work.

System Info

Any additional comments?

No response

[edison1105]

I can't reproduce it with the reproduction.
Could it be caused by a browser extension?

[nholtman]

Hey, when I mean, change This text, I mean the tex "This text" after the button Increment,
and not the text "This text" within the p element.

Also when I say the text should update,
I mean that the text should update immediately, and not after a reload, and when I open the browser inspector,
it shows an error like:

.webcontainer@runtime.cf284e50.js:26 TypeError: Cannot set properties of null (setting 'nodeValue')
at setText (vue.js?v=91f6c65e:10682:20)
at processText (vue.js?v=91f6c65e:6947:9)
at patch (vue.js?v=91f6c65e:6851:9)
at patchKeyedChildren (vue.js?v=91f6c65e:7803:9)
at patchChildren (vue.js?v=91f6c65e:7717:11)
at processFragment (vue.js?v=91f6c65e:7360:9)
at patch (vue.js?v=91f6c65e:6864:9)
at ReactiveEffect.componentUpdateFn [as fn] (vue.js?v=91f6c65e:7612:9)
at ReactiveEffect.run (vue.js?v=91f6c65e:505:19)
at vue.js?v=91f6c65e:2594:16

And after this a warning saying:
[HMR] Something went wrong during Vue component hot-reload. Full reload required.

For me it gives the same error in both Chrome and Edge, but I cannot get stackblitz to even work with Firefox for whatever reason.

I tested it on a windows computer and on a Chromebook, and in both cases it is reproducable. So I don't understand why you cannot reproduce it.

Thanks.