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

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

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.

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

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

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>