Toggling nested components with async setup inside Suspense fails

[posva]

Version

3.0.0

Reproduction link

https://jsfiddle.net/ph75kLwo/

Steps to reproduce

Click toggle child many times

What is expected?

the child to display

What is actually happening?

The child doesn't display and there is an error

---

Found with #2201

[HcySunYang]

I tracked down this issue. When a component with asyncDep is toggled, the component will be re-mount, which means registerDep will be called. But suspense has been resolved, and pendingBranch is null, nothing will happen according to the current implementation, so resulting in subsequent errors.

This involves some design decisions, I don’t have the ability to solve it, but I hope this information can save @yyx990803 ’s time

[underfin]

New nested async child rendered inside an already resolved suspense no longer puts the suspense into pending state (TODO: components with async setup() should be allowed to declare its own loading state / timeout etc. just like defineAsyncComponent)

TODO inside #2099

[HcySunYang]

Great, nice to know, thanks

[yeikiu]

In case it helps, sticking to [email protected] version under yarn.lock fixed all my issues with Suspense and router-views. You need to install dependencies with yarn --frozen-lock-file.

vue@^3.0.0-0:
  version "3.0.0-rc.5"
  resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.0-rc.5.tgz#973175d45a892b3bd23ef5de7faa4add9c66275f"
  integrity sha512-8t8Y4sHMBGD5iLZ7JfBGmKBJlzesPoL+/nW9EV8s+4LwnKC4rGlRp+Lj2rcign4iQaj0GFaL7DrQ8IoOfVX6+w==
  dependencies:
    "@vue/compiler-dom" "3.0.0-rc.5"
    "@vue/runtime-dom" "3.0.0-rc.5"
    "@vue/shared" "3.0.0-rc.5"

I had a few stable projects working on beta version and they suddenly stopped working... Truth is we were warned about a changing API for Suspense from the beginning.

This PR shows the changes to get a brand new vue-cli app with Suspense back to life: https://github.com/yeikiu/base-vue3-ts/pull/1/files#diff-8ee2343978836a779dc9f8d6b794c3b2L8832 maybe using the yarn.lock from develop branch there can help you temporarily...

[jmheretik]

any news about how to properly nest suspense + keep alive + component with async setup? even though the PR linked above is already merged im still getting an error unless i use the old 3.0.0-rc.5 :-(

my setup:

<router-view v-slot="{ Component }">
  <Suspense>
    <keep-alive>
      <component :is="Component" :key="$route.path" />
    </keep-alive>
  </Suspense>
</router-view>

thank you for help

[jods4]

Got hit by this as well, I had a <Suspense> around <RouterView>.
My goal was of course to load async routes but it doesn't work anymore since the component directly inside <Suspense> must change to go back to pending state.

What would really help here is to put a warning in dev mode when this happens, right here:
https://github.com/vuejs/vue-next/blob/0227b4a697afd598f6fa279a1a7ce84242e68f43/packages/runtime-core/src/components/Suspense.ts#L545-L546

Right now your application goes blank. Nothing happens, no log on console, no exception thrown... Took me a little while to figure it out.

[softboy99]

i have same problem, Nothing happens, no log on console, no exception thrown. i don't know how to to next

[softboy99]

Hi,
after update to 3.0.5, still nothing happens, no log on console, no exception thrown. i don't know how to do next, The following is the code:

<!-- eslint-disable vue/valid-v-model -->
    <dx-drawer
    class="layout-body"
    position="before"
    template="navmenu"
    v-model:opened="menuOpened"
    :opened-state-mode="drawerOptions.menuMode"
    :reveal-mode="drawerOptions.menuRevealMode"
    :min-size="drawerOptions.minMenuSize"
    :shading="drawerOptions.shaderEnabled"
    :close-on-outside-click="drawerOptions.closeOnOutsideClick"
  >

<!-- eslint-enabled -->
  <dx-scroll-view ref="scrollViewRef" class="with-footer">
    <slot />
    <slot name="footer" />
  </dx-scroll-view>   
    <Suspense>
      <template #navmenu> 
              <side-nav-menu
              :compact-mode="!menuOpened"
              @click="handleSideBarClick"
            />
      </template>
    </Suspense>
  <!-- eslint-enable -->
</dx-drawer>

` ` the code is used to load menu items from api server in async setup of "sidenavmenu" sfc