I have got Bug and I dont know how to fix it.
I use vue-router with suspense for async components. Use it like in the documentation: https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components
<RouterView v-slot="{ Component }">
<template v-if="Component">
<Transition mode="out-in">
<KeepAlive>
<Suspense>
<!-- main content -->
<component :is="Component"></component>
<!-- loading state -->
<template #fallback>
Loading...
</template>
</Suspense>
</KeepAlive>
</Transition>
</template>
</RouterView>
But when I quickly switch paths or a hot reload is caused, the following error is caused:
runtime-dom.esm-bundler.js:35 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
at parentNode (runtime-dom.esm-bundler.js:35:30)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5713:17)
at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
at instance.update (runtime-core.esm-bundler.js:5745:56)
at callWithErrorHandling (runtime-core.esm-bundler.js:157:36)
at flushJobs (runtime-core.esm-bundler.js:390:17)
It seems to get fixed, when I wrap the component in a div. But I dont need that:
...
<div>
<component :is="Component"></component>
</div>
...
Anyone some Idea or can help me? Thanks :)