Skip to content

Commit 97f87d1

Browse files
committed
fix(suspense): warn when using asnyc setup when not inside a Supsense boundary.
Prior Art by https://github.com/HcySunYang in #3657 refactor: move warn code to more suitable location
1 parent 5898629 commit 97f87d1

File tree

2 files changed

+27
-1
lines changed

2 files changed

+27
-1
lines changed

packages/runtime-core/__tests__/components/Suspense.spec.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1232,4 +1232,25 @@ describe('Suspense', () => {
12321232
await nextTick()
12331233
expect(serializeInner(root)).toBe(`<div>parent<!----></div>`)
12341234
})
1235+
1236+
test('warn if using async setup when not in a Suspense boundary', () => {
1237+
const Child = {
1238+
name: 'Child',
1239+
async setup() {
1240+
return () => h('div', 'child')
1241+
}
1242+
}
1243+
const Parent = {
1244+
setup() {
1245+
return () => h('div', [h(Child)])
1246+
}
1247+
}
1248+
1249+
const root = nodeOps.createElement('div')
1250+
render(h(Parent), root)
1251+
1252+
expect(
1253+
`Component <Child>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. Therefore, this component can't render.`
1254+
).toHaveBeenWarned()
1255+
})
12351256
})

packages/runtime-core/src/component.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -654,7 +654,6 @@ function setupStatefulComponent(
654654

655655
if (isPromise(setupResult)) {
656656
setupResult.then(unsetCurrentInstance, unsetCurrentInstance)
657-
658657
if (isSSR) {
659658
// return the promise so server-renderer can wait on it
660659
return setupResult
@@ -668,6 +667,12 @@ function setupStatefulComponent(
668667
// async setup returned Promise.
669668
// bail here and wait for re-entry.
670669
instance.asyncDep = setupResult
670+
if (__DEV__ && !instance.suspense) {
671+
const name = Component.name ?? 'Anonymous'
672+
warn(
673+
`Component <${name}>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. Therefore, this component can't render.`
674+
)
675+
}
671676
} else if (__DEV__) {
672677
warn(
673678
`setup() returned a Promise, but the version of Vue you are using ` +

0 commit comments

Comments
 (0)