Cannot read properties of null (reading 'insertBefore')

[Guervyl]

Version

3.2.18

Reproduction link

github.com

Steps to reproduce

I created this project to reproduce it. https://github.com/Guervyl/vueJs3-not-updated. But, I could not be able to get the error. From this test repository, the value just not updated.

And this error is weird. It's nothing like the others. I made a video so that you can see what's going on. Before you comment anything please watch the video. There is no error like this. Here is the link: https://drive.google.com/file/d/1cP-4a4rZ69bBxQphzs7hhPQgN0Ozol4m/view?usp=sharing .

It's hard to explain what's going on. When I access a property on the object elementObj.type === 'link' I got the error. When I remove the code, I don't get the error. And this only happens when I after I roughly removed some existed property from the object outside of vuejs.

What is expected?

It should not throw error and the view was supposed to be updated.

What is actually happening?

It throws an error.

---

Please watch the 5 minutes video to be able to understand what the problem is.

[LinusBorg]

You are essentially updating the original non-reactive object (outside Vuejs) and expect Vue's reactive proxy for that object to update. That doesn't work, Vue doesn't get informed about changes to the nonreactive original opject.

https://v3.vuejs.org/guide/reactivity.html#proxy-vs-original-identity

Consequently, when removing a property from the original object, Vue's reactive proxy for that object thinks it's still there and all sorts of funky stuff can go wrong.

[yyx990803]

For Vue 3, reactivity works through proxies. So essentially: Do NOT set an external object on this then expect the original object to become "reactive". This worked in Vue 2 but won't in Vue 3 - Vue 3 will no longer modify the original object. You can only work through the reactive proxy of the object (through this.object)

This will be more clearly documented in the new docs, but if you are coming from Vue 2, make sure to understand the difference.

[Guervyl]

It's great that vue3 does not touch the original object. I wasn't modifying the external object to expect Vue3 to react. I was assigning the external object to this.object after I modified the external object.

I found the problem. Somewhere in the code it was destroying the Vue html container.

Thanks for answers.