Version

3.2.11

Reproduction link

https://sfc.vuejs.org/

Steps to reproduce

After trying it in Incognito mode, I realized that my issue seems to be with this Chrome extension.

1. Install the extension: https://chrome.google.com/webstore/detail/highlit/cooahmcpmajfpnanjkdfiejkffphknnm
2. Go to the SFC site and click the "Version" dropdown.
3. The following error appears:

TypeError: Cannot read properties of null (reading 'insertBefore')
    at insert (vendor.93237667.js:1)
    at C (vendor.93237667.js:1)
    at S (vendor.93237667.js:1)
    at m (vendor.93237667.js:1)
    at A (vendor.93237667.js:1)
    at $ (vendor.93237667.js:1)
    at q (vendor.93237667.js:1)
    at O (vendor.93237667.js:1)
    at m (vendor.93237667.js:1)
    at N (vendor.93237667.js:1)

What is expected?

I don't think the extension should be affecting the Vue instance. I've used the extension with Vue 2 and haven't had any problems.

What is actually happening?

It seems that the Highlit extension may be modifying the DOM in a way that Vue loses the parent element when updating its children.

Now that I know the problem behind the error, the workaround is to disable the extension while developing or use Incognito mode without the extension.

I don't think the extension should be affecting the Vue instance. I've used the extension with Vue 2 and haven't had any problems.

I reproduced your problem. Indeed, highlit modified the dom element on the sfc page, causing the optional version of vue in the drop-down box to fail to load. Vue2 does not have sfc, so it cannot be reproduced in the same scene. No problem does not mean that ‘highlit’ will definitely not modify the dom in vue2.

It seems that the Highlit extension may be modifying the DOM in a way that Vue loses the parent element when updating its children. Now that I know the problem behind the error, the workaround is to disable the extension while developing or use Incognito mode without the extension.

You are right!