Vue3 Error on Cannot read properties of null (reading 'insertBefore') error cannot be displayed normally, solution.

vue3报错Cannot read properties of null (reading ‘insertBefore’)

When starting locally, all operations on the page are normal, and the display is normal; after deployment to the production environment, the operation of data-driven DOM changes will cause the following error.
Cannot read properties of null (reading 'insertBefore')

This error caused the page to display abnormally and could not be displayed normally.

guess the reason

The template cannot be found due to rendering. There are three possible reasons:

1. v-if results in: ( v-showreplaced with v-if)
2. v-for results in:
3. The data is initialized as undefined , but there are calls or renderings in the template.

Solution

You can check the code of the page step by step, comment the code, and release the production view. Try it out to see where the problem is.

1. replace code

My page finally found the problem because v-if, and then there is no error reporting problem v-showafter using the replacement v-if.

2. updated version

Also found a workaround to update Vue to the latest version ([email protected]) to fix it.