Failed to execute 'insertBefore'
Vue version
3.2.36
Link to minimal reproduction
Steps to reproduce
Open the reproduce link, or paste below code to SFC playground.
<template>
<div>
<div>
<Foo v-if="tab === 2"></Foo>
<!-- remove this line can fix error -->
</div>
</div>
</template>
<script lang="ts" setup>
import { defineComponent, ref } from 'vue';
const tab = ref(1);
const Foo = defineComponent({ async setup() { } });
const interval = setInterval(() => {
tab.value++
console.log(tab.value);
if (tab.value >= 3) {
clearInterval(interval);
}
}, 10);
</script>
What is expected?
No error showing.
What is actually happening?
Got error report Uncaught (in promise) 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..
System Info
No response
Any additional comments?
Remove <!-- remove this line can fix error --> can fix the error.
I feel this is not a bug, because A component with async setup() must be nested in a <Suspense> in order to be rendered
but the error is not handled😉.
have the same problem
Well, read the warning and act accordingly:
a) switch away from setup async to normal setup, or b) add a Suspense boundary.
The problem occurs in a bit of complex code, I'll try to update the example to exclude defineComponent({ async setup() { } });.
Sorry for late 🙏, close this for now before I provide minimal reproduction.