Suspense does not include async components when hydrating

[danielroe]

Vue version

3.2.39

Link to minimal reproduction

https://stackblitz.com/edit/github-fktkzl-2bccdr

Steps to reproduce

1. Load the app with npm run dev if it does not auto-start, looking at the browser console log.

2. Press the 'Trigger suspense' button

What is expected?

I expect both in the initial hydration and in the subsequent suspense invocation for suspense not to have resolved by the time the async child component runs its setup.

What is actually happening?

In the initial hydration of the app, <Suspense> does not include child components within its cloak of suspense.

System Info

No response

Any additional comments?

No response

[mmis1000]

It seems suspense only works with async setup instead of async component?

https://stackblitz.com/edit/github-fktkzl-bhp65u?file=src%2FApp.vue

If it changed to async setup, then everything works

[danielroe]

Async components are wrapped into suspense when the suspense is triggered on client-side, and <Suspense> documentation says that async components should be treated as dependencies: https://vuejs.org/guide/built-ins/suspense.html#async-components.

[mmis1000]

https://stackblitz.com/edit/github-fktkzl-ptamri?file=src%2FApp.vue

I think what breaks the source issue is nested suspense.
But that should probably be a separate issue.

The async component under nested suspense seems never be included by parent suspense in any case.
Which is how nuxt 3 use the Suspense here.

<NuxtRoot> Suspense
  <App> Async
    <Layout> Suspense <= Notice: they are nested
      <Page> Async

[danielroe]

There is only one Suspense in the reproduction here.

And if you look at the PR I think you are referring to, you should see that we already ensure there is only one Suspense there.

[SebbeJohansson]

@danielroe in terms of getting this to work properly for nuxt3 has there been any progress? All issues point to this which has some merged PRs but it's still an issue.

[yyx990803]

Closed via 1b8e197 (to be released in 3.5)

[kitroling]

这是来自QQ邮箱的假期自动回复邮件。 您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。