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:

[email protected]: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.