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

[marius]

Hello,

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

hello-world.tgz

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:

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

gets rid of the error.

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

[LinusBorg]

This forum doesn’t render script code

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

Using Syntax Highlighting in this forum

This forum uses Markdown (including Github flavors) to format its posts. You can read all about this format here. Since many people seem to struggle with syntax highlighting, here are a few examples. It’s actually pretty easy if you know what to do - just enclose your code in 3 backticks ( ``` ), like this: Basic ``` npm install -D vue-loader ``` turns into: npm install -D vue-loader JavaScript highlighting ```javascript this.is(‘my code’, {   coolness: 9000,   callback () {     con…

---

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.

[marius]

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.

Issue: v5 SVG causes double markup and JS error in Vue app

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

[LinusBorg]

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.

[marius]

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