Failed to execute 'removeChild' on 'Node'

[rakista112]

Hi guys,

So I'm trying to put a dynamic component in a ul component using v-for. One component in the dynamic component has only 1 li. The other component has a fragment containing 2 list items. (li)

It works fine when the first time the ul component renders with both types of components working peacefully in the list.

But when I change the list data state in the parent with the ul, I get this error.

When this happens, all the functionalities of my page just stops working. Is this because of the fragment being in a dynamic component?

Looking forward to hearing from you.

[ghost]

i need this fix too !

[rakista112]

@frisouilles hi use the build in issue #31 for now. I just cloned it and imported it with its filename. I wonder when it will be merged.

[RauppRafael]

This is not working for me, I event tried adding the dependency with a npm package and it still throw the DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. whenever i try to update the items in a for loop.

[am9zZWY]

https://stackoverflow.com/a/56001924/6604114 you could try to increment the key every time you change your data.

<div :key="listKey">
   <li>...</li>
   <fragment>
      <li>...</li>
      <li>...</li>
   </fragment>
   ...
</div>

<script>
...
   data: {
       listKey: 0
   },
   methods: {
      updateKey: function () {
          this.listKey+= 1
      }
   }
</script>

this forces to rerender the list. Had the same issue. This method fixed it for me

[michapietsch]

For conditionally showing content we used this workaround: Toggle visibilty (v-show) instead.

[roborock]

I had same Issue especially when i try to use v-show v-show only trigging one time.

[privatenumber]

Is there reproduction code for this bug?

[Thunberg087]

Hello, check if the latest update fixes the issue.

[agilisticdev]

This bug seems to be ongoing for at least a year and a half!!! (this thread has been started on Jul 15, 2019!). Why is there any update/fix/explanation?

[privatenumber]

I'd love to help out if anyone can produce a reproduction of the error.

Can you also try vue-frag to see if the problem exists there?

[jmalczak]

Thanks @privatenumber I have switched to vue-frag due to this issue. It's working fine for me!

[jonathanpel]

I have made a small example to reproduce the bug, but it's for a v-if: https://codesandbox.io/s/thunberg087vue-fragmentissues32-8vit1?file=/src/App.vue Just press the "toggle" button and it will make the error.

[privatenumber]

Thanks @jonathanpel

Seems to work fine using vue-frag: https://codesandbox.io/s/thunberg087vue-fragmentissues32-forked-6jcpn?file=/src/App.vue

It's a lighter and tested alternative to vue-fragment if you want to try it out!

[gsofter]

So is there any other way to keep using vue-fragment?

[web2wire]

Note for anyone also looking at vue-frag. It is quite clear that it is intended for root nodes only and not for use amongst other elements like I (and probably other people) have been trying to use vue-fragment.

[privatenumber]

@web2wire I'm not sure what usage you're referring to, but if it's missing, why don't you open a feature request for it?

[web2wire]

I was able to restructure my use case so that I could use just root node replacement (with vue-frag) but prior to that I had vue-fragments nested to several levels in some of the larger templates as I originally assumed they worked like something similar in React.

[privatenumber]

If you're not using it on the root node, you should use <template> to group nodes without creating a wrapper element.

If you're trying to unwrap the root node of a component you're using, vue-frag supports that (eg. <custom-component v-frag>).

[web2wire]

Yep, that is all good for simple static cases. I originally came here because among other things I needed to do ad hoc rootless HTML replacement since I'm doing a site migration. So something like,

<template>
  <h2>Here is a new header</h2>
  <fragment :html="some.migrated.content"/>
  <p>A new page footer</p>
</template>

Adding a containing element breaks various legacy styling. Version 1.5.2 of vue-fragment appeared to support this use case but although the replacement part appeared appeared to work there are too many other issues raised in that version. I still don't have a good resolution for some scenarios like those above, other than some custom solutions that require the runtime compiler.

[privatenumber]

Seems to work fine with vue-frag? Demo

[web2wire]

Thanks, that's great to hear and I'll give it a try. I'm sure I read somewhere that vue-frag was intended only for template root nodes but if it can be scattered arbitrarily among other elements then I think that addresses all my use cases!

[mrtnzagustin]

I think this problem is only in version 1.5.2.. v1.5.1 works fine. The v1.5.2 versions is not even a tag in the repo.

[thomasmoors]

For me it didn't even show the error, it just didn't work

[BaileyJM02]

I can confirm that @mrtnzagustin is correct. Using npm -i vue-fragment appears to install version 1.5.2 which is not a tag on this repository. Updating the package.json file from "vue-fragment": "^1.5.1" or "vue-fragment": "^1.5.2" to

"vue-fragment": "1.5.1"

will force version 1.5.1 to be installed as will not allow any minor version increases. After reinstalling your node modules, everything should work as expected. If not, try deleting your package-lock.json file and try again.

[j-tap]

I have this error when I use the condition:

fragment(v-if="data")
     div Content

I fixed it like this:

fragment
     template(v-if="data")
         div Content

[mixn]

Unfortunately, the fix above as suggested by @BaileyJM02 and @mrtnzagustin didn’t work for me — I got the same error, even with "vue-fragment": "1.5.1".

Luckily, I was able to resolve my issue by replacing vue-fragment with vue-frag. 🥳

It’s not a drop-in replacement, as it works via the v-drag directive instead of a component, but you can easily wrap it in a custom fragment component and use it the same way as vue-fragment.

Hope that helps! Not a direct solution to this open issue, but it should solve your issue. 😌

continues crying in Vue 3 native fragments 😢

[joaomelo]

vue-fragment

Unfortunately versions 1.5.2 and 1.5.1 didn't work for me. I'm trying to use it around a Bootstrap-Vue modal component beside a button. When the button triggers the modal to show an error occurs:

<template>
  <Fragment>
    <SomeButton
      @click="showModal"
    />
    <SomeModal ref="modal" />
  </Fragment>
</template>

[joaomelo]

display: contents saved me:

<template>
  <div class="fragment"><slot /></div>
</template>

<script>
export default {
  name: "Fragment",
};
</script>

<style scoped>
.fragment {
  display: contents;
}
</style>

more here: https://css-tricks.com/get-ready-for-display-contents/

[pencilcheck]

vue-frag works for me. Going to vue-frag instead of using this one.