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

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


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.


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.


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.