vue3 Cannot read property 'insertBefore' of null

Question

I'm getting this error when i try to update my data fields in vuejs.

data() {
    return {
        form : useForm({
            imageFile : null,
            img_id : null,
        }),
        product_images : this.images,
    }
},

here I'm updating the product_images after the success of post request sent by the user.

like this.

this.form.post(url, {
    onStart : () => {
        Inertia.on('progress', (event) => {
            if (event.detail.progress.percentage) {
                NProgress.set((event.detail.progress.percentage / 100) * 0.98);
            }
        });
    },
    onFinish : () => {
        this.product_images = this.images;
    },
})

showing the product_images in template be like

<div v-for="image in product_images" class="col-xl-4 col-lg-6 col-12 mb-3" :key="image.id">
     <input-image @changeImage="onChangeImage" :id="image.id" :image="image.image" />
</div>

when product_images changes after the post request, product_images not update in DOM but get this error why?

app.js:12889 Uncaught (in promise) TypeError: Cannot read property 'insertBefore' of null
    at insert (app.js:12889)
    at mountElement (app.js:9604)
    at processElement (app.js:9545)
    at patch (app.js:9465)
    at patchKeyedChildren (app.js:10315)
    at patchChildren (app.js:10093)
    at processFragment (app.js:9839)
    at patch (app.js:9461)
    at patchKeyedChildren (app.js:10174)
    at patchChildren (app.js:10117)

Answer 1

Unfortunately the vue error message is not very helpful.

In my case, I had some uninitialized data in the html template like this:

<template>
    <div>
        {{ data.xyz }}
    </div>
</template>

Change this to either:

<template v-if="!!data">
    <div>
        {{ data.xyz }}
    </div>
</template>

Or:

<template>
    <div>
        {{ data?.xyz }}
    </div>
</template>

Answer 2

I fixed it by updating my Vue to the latest version (vue@3.2.20).