Suspense doesn't work with keepAlive

[Urobs]

Version

3.0.11

Reproduction link

https://codesandbox.io/s/hidden-flower-y164t?file=/src/App.vue

Steps to reproduce

1. Open the reproduction link
2. clickadd count
3. click to about page
4. error appear: TypeError Cannot read property 'parentNode' of null

What is expected?

keep alive works

What is actually happening?

it doesn't work

[HcySunYang]

This link explains how these components work together, their order is very important https://v3.vuejs.org/guide/migration/suspense.html#combining-with-other-components, but unfortunately, there are still bugs here

[mahnouel]

I'm no vue internals expert, but I ran into the same error when using suspense, and it seems to be caused by prevTree.el being undefined. When I place another vue component next to the error throwing one, prevTree.el seems to be set, and I get no error anymore.

[723386252]

you can try to add attribute incluce to <keep-alive></keep-alive> to resolve

[mauril26]

This link explains how these components work together, their order is very important https://v3.vuejs.org/guide/migration/suspense.html#combining-with-other-components, but unfortunately, there are still bugs here

Update: https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components

[posva]

This one is working when using the correct order:

  <router-view v-slot="{ Component, route }">
    <template v-if="Component">
      <KeepAlive>
        <Suspense>
          <!-- main content -->
          <component :key="route.path" :is="Component"></component>

          <!-- loading state -->
          <template #fallback>
            Loading...
          </template>
        </Suspense>
      </KeepAlive>
    </template>
  </router-view>