I've encountered a puzzling issue in my Vue web app where sporadic error messages are causing my app to come to a standstill.
Error message 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 message 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 Message 1:
https://i.sstatic.net/s806Q.png
Stack trace for Error Message 2:
https://i.sstatic.net/yuAcW.png
By dissecting the stack trace, I've identified that the issue stems from the setListingFromCoords() method within my dashboard component. It's not related to the vuex "getListingsFromCoords" action as the "data" is correctly logged and data.results are being filled accurately as well. The error seems to lie within this.listings = data.results.
Here is the setListingFromCoords() method in my 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 of my dashboard component, I have a card component that iterates over the listings returned by the setListingFromCoords method. This part seems to be triggering the Vue errors, as it's the only component reliant on listings.
<card
v-for="(listing, index) in listings"
v-bind:index="index"
v-bind:key="listing._id">
</card>
Could someone verify if my observations are accurate? How can I fix this issue in my code and what's causing these errors to surface?