DOMException: Failed to execute 'insertBefore' on 'Node'


#1

I’m not able to find what causes the following error:

vue.runtime.esm.js?2b0e:587 [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."
warn @ vue.runtime.esm.js?2b0e:587
logError @ vue.runtime.esm.js?2b0e:1733
globalHandleError @ vue.runtime.esm.js?2b0e:1728
handleError @ vue.runtime.esm.js?2b0e:1717
(anonymous) @ vue.runtime.esm.js?2b0e:1835
flushCallbacks @ vue.runtime.esm.js?2b0e:1754
vue.runtime.esm.js?2b0e:1737 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.
    at Object.insertBefore (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5322:14)
    at updateChildren (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5835:32)
    at patchVnode (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5920:29)
    at VueComponent.patch [as __patch__] (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6080:9)
    at VueComponent.Vue._update (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2665:19)
    at VueComponent.updateComponent (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2783:10)
    at Watcher.get (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3137:25)
    at Watcher.run (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3214:22)
    at flushSchedulerQueue (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2976:13)
    at Array.eval (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1832:12)

I’m not even able to provide steps to reproduce the issue because it happens occasionally. I guess it has something to do with the renderer.

In the error message, there are only references to Vue source files, so I don’t even know what component causes the problem.


#2

Can you at least share the nextTick function block?


#3

No, because there’s no such a function in my code. If there was I would start the debugging from that function :). nextTick is a Vue’s API method, but I’m not calling this method anywhere.


#4

遇到了同样的问题,请问你的问题解决了么?
I have encountered the same problem. Did you solve it?


#5

As a hint:

I just had another topic where someone had the same error. It appearantly was because of a duplicate id that was used as a key on items in a v-for.


#6

I have the same problem. :tired_face: