Subscribe on changes!

`suspensible` option throws error when child of suspense is not async

scope: suspense
avatar
danielroe
May 1st 2023

Vue version

3.3.0-beta.3

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 <Suspense suspensible> and the following error will be displayed:

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

I believe this is because there is no suspense needed for the child of the second suspense. When replacing the <Sync> with <Async>, everything works as expected.

What is expected?

I expect that <Suspense suspensible> should work with both async + sync components.

What is actually happening?

It only works with async components.

System Info

No response

Any additional comments?

See https://github.com/vuejs/core/issues/5513, https://github.com/vuejs/core/pull/6736.

avatar
danielroe
May 8th 2023

I'm still experiencing this on beta5 (with SSR):

https://play.vuejs.org/#__SSR__eNp9UstugzAQ/JWVLxAJcKQql4hEifoDldIjFwKb4jZ+yDZEVcS/d8HQpmnUC3h3hpnxLle2NybrWmRrlrvKCuPBoW/NtlAAQhptPVyhxpNQuHefqnrW1FSofAIN9HCyWkJEAtHwQaWV83AgGmzgOnQgyMWLuQSw1LAKqLXZQhNHteiiBKJGgG/QYrQIxH54jY+gOrqT7KMscTmCQXIyKi+l8KDwAi+UUTiMLTp97nDgUKhXIVG3fu4msFouF5P3FHG4yJiC2jkP46HBUOFRmnPpcRxTfmidQeVCRTXdaDregODCQRzPMzHgQ3L+w+f3anyW+wXl/DsDS1jYVCpLk707rWib4xSKCXAFW89zKRhta6gL1nhv3JrzVpmPt6zSku8I47ZVnoaT1lrunrKnbJke0ZfZioI4f4tm6GR6tPri0JJvwZIbC07NDm1qUdW0Vvuv5R33ge0d44/19Lf0rP8Cn3zv5g==

The linked PR did seem to fully resolve the issue when locally testing.

~> https://github.com/vuejs/core/issues/8265

avatar
baiwusanyu-c
May 9th 2023

@danielroe In fact, for ssr in #8242 , this error also exists. Evan and I have similar ending ideas. They both avoid calling the resolved method repeatedly, but we both forget to deal with hydration. I resubmitted a pr to fix it, hope Evan can take a look @yyx990803

GitHub Track