[Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node'

Question

I'm receiving the following error messages in my Vue web app occasionally but when it does happen, it completely halts my app.

Error msg 1:

[Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

Error msg 2:

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Stack trace for Error Msg 1:

Stack trace for Error Msg 2:

Based off the stack-trace, I've pinpointed that the setListingFromCoords() method from my dashboard component is causing the issue. The problem also isn't with the vuex "getListingsFromCoords" action since "data" is console.logged correctly with the correct information. Additionally, data.results is also being populated correctly. The problem according to the stack trace is with this.listings = data.results.

Below is my setListingFromCoords() method, which resides in the dashboard component:

setListingFromCoords() {
    return new Promise((resolve, reject) => {
        this.$store.dispatch(
            "getListingsFromCoords"
        ).then((data) => {
            console.log(data); // "data" is returned correctly here
            this.listings = data.results; // CODE BREAKS HERE
            this.previous = data.previous;
            this.hasPrevious = data.hasPrevious;
            this.next = data.next;
            this.hasNext = data.hasNext;
            resolve();
        }).catch((err) => {
            reject(err);
        });
    });
},

Within the template portion of my dashboard component, I have the following card component that is v-for'ed based on the number of listings returned by the above setListingFromCoords method. This is the only component that relies on listings, which leads me to believe that this portion is somehow causing Vue to throw the errors.

<card
    v-for="(listing, index) in listings"
    v-bind:index="index"
    v-bind:key="listing._id">
</card>

Can someone please confirm if my conclusions are in fact reasonable/correct. Also, how can I amend my code to resolve this issue and why is this error being thrown?

Answer 1

I had a similar issue with vue-router turns out I'm wrapping <router-view /> inside vue-fragment.

EDIT

This issue was introduced in vue-fragment v1.5.2, downgrade the package to v1.5.1.

and as @jai-kumaresh mentioned, remove ^ in package.json "vue-fragment": "^1.5.1" so npm will install the exact same version only.

EDIT October 2021

vue-fragment package is no longer needed if you're using Vue 3, now you can add multiple elements directly to the root element.

Answer 2

The following is from VueJS core team member @LinusBorg:

The error message itself is a DOM exception where Vue tried to insert an element before another one, but that element doesn’t exist anymore in the DOM.

Combined with the information you provided I would assume that Vue tries to insert an element before another one in the DOM that was previously created by the v-for - in other words, Vue is trying to patch the existing list of elements with what it thinks are changes necessary to reflect the change in the list, and fails,

I can’t see anything directly causing this error, my only suspicion would be that maybe you have a duplicate listing._id?

His suspicions were correct. I had a duplicate key in my dashboard component, which lead to the error.

Answer 3

I had a similar issue with the Vue Slick slider: in my case the solution was to replace a v-if directive that was around the component with a v-show directive. At the beginning I had also removed the :key in the loop that was generating the slides, but in the end I was able to use the keys again.

Answer 4

We've seen this error when using <template> elements with a v-if.

If we converted to <div> instead it seemed to fix it.

It ends up being a bit of wasted HTML but it did fix the issue.