[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

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 2

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 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.

Answer 5

I also had the same issue.

Participants: My own Profile Form component + youtube component.

<youtube
    v-if="profileData.showYoutube && profileData.youtubeUrl"
    :video-id="$youtube.getIdFromUrl(profileData.youtubeUrl)"
/>

Problem: If user views some profile with loaded youtube component, then by clicking "Create Profile", the user is redirected by vue-router from site.com/some_profile_name to site.com/create_profile. As an additional step profileData is cleaned (because user wants to create a new profile...).

In this case both components are reused, but youtube for some reason because of profileData cleaning was the source of the issue: [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."

Solution: I was able to fix it by wrapping youtube component by <div> (<template> also produces error):

<div v-if="profileData.showYoutube && profileData.youtubeUrl">
    <youtube :video-id="$youtube.getIdFromUrl(profileData.youtubeUrl)"/>
</div>

Answer 6

1. Downgrade from vue-fragment version 1.52 to version 1.51 and don't add ^ on version, for now stick with 1.51 as the bug is on version 1.52

2.If you've still having this problem try to remove fragment tags around

so instead of:

<template>
   <fragment><router-view></router-view></fragment>
</template>

just put:

<template>
    <router-view></router-view> 
</template>

or if you can just wrap this router-view with other html tags but not

the components which lives inside the can still use

Answer 7

I've moved to vue-frag which:

• a super-simple drop-in replacement (tiny change to import line)
• produces cleaner markup (no <!-- --> everywhere)
• has a neat build-time plugin to obviate the <fragment> tag in many cases
• seems more recently maintained