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

Hello,

I’ve replicated this in a new minimal Vue app:

which can be run locally with `npm run serve’ and accessed at http://localhost:8080/#/detail/123

This happens on Vue page which is defined in router as

                path: 'records/:id',
                name: 'RecordDetail',
                props: true,

and linked with ‘a.com/#/records/123

Record with id 123 is loaded from database, usually rendered properly (other times it has this issue: https://stackoverflow.com/questions/58729274/vue-font-awesome-svg-sometimes-renders-icons-twice )
then clicking on a button which has handler ‘itemConfirm’ gives the same error:

vue.esm.js?a026:628 [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.”

itemConfirm @ RecordDetail.vue?f97b:145

click @ RecordDetail.vue?e784:50

invokeWithErrorHandling @ vue.esm.js?a026:1863

invoker @ vue.esm.js?a026:2184

original._wrapper @ vue.esm.js?a026:7559

vue.esm.js?a026:1897 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.

There’s no nextTick() function in my code. I do NOT use v-for (saw this as another cause).

The whole component code, simplified and still giving the error:

This forum doesn’t render script code, so here it is: https://stackoverflow.com/questions/58729274/vue-font-awesome-svg-sometimes-renders-icons-twice

Record JSON data as loaded from server:

{
  "id": "mkt7y3v0m5vupnal",
  "practitioner_id": "yyie5csyc0y1lwcg",
  "day": "2019-11-08",
  "start_time": "16:00",
  "end_time": "16:45",
  "status": "New",      
  "practitioner_name": "Dr Ruby Decker"
}

When clicking Confirm, the page often renders this duplicated content:

Screenshot%20from%202019-11-07%2012-29-14

Removing this condition
v-if="item.status == 'New'"

gets rid of the error.

Any hints, please? (@LinusBorg maybe you’d have a suggestion?)

It sure does: Please read the following guide about how to properly format code and then edit your topic accordingly.


I’d take a look right now but I can’t access public dropboy links from the office. A github repository would have been easier.

I’ll take a look after work later.

Thanks, Linus!
It seems there’s a known issue with Font Awesome SVG and Vue. Instead of using the bundle, they recommend the vue-Font Awesome plugin. It was quite hard to find that out, though, as the behavior is weird.

Appreciate your time, the cause was tracked down after a few wasted hours.

A simple key on the paragraph with the v-if works as well:

<p v-if="item.status == 'New'" key="new_p">
  Please confirm your appointment:
</p>

I’ve seen these kinds of issues before but never manage to track the exact source, but a key usually helps Vue to target the right elements in these cases.

Thank you, Linus! Didn’t know key works for more than v-for. Will use that in future in similar situations.
Have a good weekend :slight_smile: