0

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 :)

0 Answers0