From 053c65bc5eb6e5288421d447ce0f6cad61217943 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= <t.luenborg@googlemail.com>
Date: Wed, 13 Apr 2022 11:36:43 +0200
Subject: [PATCH] dx(suspense): warn when using async setup when not inside a
 Suspense boundary (#5565)

close #3649
---
 .../__tests__/components/Suspense.spec.ts     | 23 ++++++++++++++++++-
 packages/runtime-core/src/component.ts        | 10 +++++++-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-core/__tests__/components/Suspense.spec.ts b/packages/runtime-core/__tests__/components/Suspense.spec.ts
index 421bc0a8e96..b206dced463 100644
--- a/packages/runtime-core/__tests__/components/Suspense.spec.ts
+++ b/packages/runtime-core/__tests__/components/Suspense.spec.ts
@@ -709,7 +709,7 @@ describe('Suspense', () => {
       <div v-if="errorMessage">{{ errorMessage }}</div>
       <Suspense v-else>
         <div>
-          <Async />     
+          <Async />
         </div>
         <template #fallback>
           <div>fallback</div>
@@ -1232,4 +1232,25 @@ describe('Suspense', () => {
     await nextTick()
     expect(serializeInner(root)).toBe(`<div>parent<!----></div>`)
   })
+
+  test('warn if using async setup when not in a Suspense boundary', () => {
+    const Child = {
+      name: 'Child',
+      async setup() {
+        return () => h('div', 'child')
+      }
+    }
+    const Parent = {
+      setup() {
+        return () => h('div', [h(Child)])
+      }
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+
+    expect(
+      `A component with async setup() must be nested in a <Suspense>`
+    ).toHaveBeenWarned()
+  })
 })
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 9b2f35c9745..53048b9a294 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -654,7 +654,6 @@ function setupStatefulComponent(
 
     if (isPromise(setupResult)) {
       setupResult.then(unsetCurrentInstance, unsetCurrentInstance)
-
       if (isSSR) {
         // return the promise so server-renderer can wait on it
         return setupResult
@@ -668,6 +667,15 @@ function setupStatefulComponent(
         // async setup returned Promise.
         // bail here and wait for re-entry.
         instance.asyncDep = setupResult
+        if (__DEV__ && !instance.suspense) {
+          const name = Component.name ?? 'Anonymous'
+          warn(
+            `Component <${name}>: setup function returned a promise, but no ` +
+              `<Suspense> boundary was found in the parent component tree. ` +
+              `A component with async setup() must be nested in a <Suspense> ` +
+              `in order to be rendered.`
+          )
+        }
       } else if (__DEV__) {
         warn(
           `setup() returned a Promise, but the version of Vue you are using ` +