Subscribe on changes!

suspensible option throws error when child of suspense is not async in SSR

avatar
May 10th 2023

Vue version

v3.3.0-beta5

Link to minimal reproduction

https://play.vuejs.org/#eNptUMtqwzAQ/JXBF9lgqlx6KU4g9AcK6bEX19lggS0JSXYoxv/elWT3RS+SdmY0O7tLcbb2YZ6oeCoa3zllAzyFyZ7eNKBGa1zAgivdlKaz/9Dds2FQkw41eqy4OTNCsIGIHzqjfcCFZThiiQiyXVntJeAYcBoMHU/oS3FVs6gheoXQkyNRZeEar3Rk19Sdbf/LUraJzJZbo/beqgBNd7xwRuWpdOTNMFPUcKhXNZKZwo7WeDwcqq33FjEOklIw3Mi8Hl4MF4FGO7SB0pqay+QtaZ8rrnmi7fmDhM8P9T7swszH5PJbL/+6yd3uF9XIrwzF+gnIkZOe

Steps to reproduce

<script setup>
  import { defineAsyncComponent, h } from 'vue'
  const Sync = {
    setup() {
      return () => h('div', 'hi there')
    }
  }
  const Async = defineAsyncComponent(async () => {
    await new Promise(resolve => setTimeout(resolve, 500))
    return Sync
  })
</script>

<template>
  <Suspense>
    <div>
      <Suspense suspensible>
        <Sync />
      </Suspense>
    </div>
  </Suspense>
</template>

Load page with a synchronous component under and Switch to SSR modeļ¼Œthe following error will be displayed:

suspense.resolve() is called without a pending branch.

What is expected?

I expect that should work with both async + sync components.

What is actually happening?

error will be displayed:

suspense.resolve() is called without a pending branch.

System Info

No response

Any additional comments?

The problem is the same as the #8206 , except in e147512 we forgot to handle hydration