Error: suspense.resolve() is called without a pending branch (Vue 3)

Question

I keep getting this error and I'm not sure why. Everything seem to work well but I'm still getting this error. Does anyone know what it really means? I cannot find the answer anywhere.

Answer 1

I got the same issue with this template:

<template>
  <Suspense>
    <div class="w-full h-full">
        <NotAuthenticated v-if="!isAuthenticated"/>
        <Authenticated v-else/>
    </div>
  </Suspense>
</template

I think the issue is that when isAuthenticated was changed from false to true, suspense is having trouble finding the pending state because the async components are not direct children.

This refers to this paragraph in the doc:

Once in a resolved state, will only revert to a pending state if the root node of the #default slot is replaced. New async dependencies nested deeper in the tree will not cause the to revert to a pending state.