Failed to execute 'insertBefore' on 'Node'

[Skriptach]

Error occurs on hot reload and when click router link

[OmgImAlexis]

Likely related to https://github.com/y-nk/vue-fragment/issues/16

I’m using poi which uses hot reloading too. Maybe that’s what’s causing it. 🤔

[y-nk]

@OmgImAlexis is right, a HMR will cause some side effects. They're development bugs, so that's kinda ok, but i'm working on fixing them.

[JavierPAYTEF]

This happened to me as well but using it inside a cordova application. It took me a while to pinpoint that the issue was because of the fragment tag because everything was obfuscated. Sorry I don't have the code because I had to remove the tag to make it work. I'll trye to describe it in case it helps for debugging this issue.

It happened in a .vue component where the fragment tag was used as the root element (the first tag after <template>). That component was referenced inside another that had a Navigation Drawer which was used in the main App.vue.

The error happened when I opened the drawer and clicked an option inside. That command hid the navigation drawer and started a process that, after a bunch of promises, triggered an event that made me change a property in App.vue that affected the hidden fragment component.

I don't know much about the internals of fragment, but maybe the fact that the component that contained the <fragment> was not currently visible (because the navigation drawer was hidden) might be the cause of the issue. So it's changing nodes not attached to the main DOM.

I forgot to mention that the fragment had only 2 items inside and the change in properties made one of them invisible and the other visible using v-if and v-else.

[wrabit]

For me, this was not just occuring in development / HMR, but in bundled production code also:

I am using like this:

<template>
  <fragment>
    <template v-if="loading">
      <loading />
    </template>
    <template v-else>
      <tr>
        <td>...</td>
      </tr>
  </fragment>
</template>

The whole component is being toggled by the parent using a v-if.

[gfrileux]

This seems to also be happening when unit testing components using Jest and vue-test-util.

[alexmccabe]

This happens when the Fragment has a child of <template />. Since the template element isn't a real element, you can't insert it to the DOM, which the Fragment lib is trying to do