Vue version
3.5.31
Link to minimal reproduction
https://play.vuejs.org/#eNqtU01v2zAM/SuELnEAw8aQ7VI4HZKth+6wFstu81B4DuO4kyVDH26GwP99lGxnhpemPVQXm+Sj+Eg+HdmqrqPGIrtiic5VWRvQaGwNPBPFMmVGp+w6FVBWtVQGPuMvW6z0H5GvYKdkBbMoHvncTbNz6PUZ9LpHJ3FXmMqQYbCqeWbQFYVkY3WNQncW2duy6X/JGJOJz7nXJ3cSD5lJPLoziUflWEjd5lLsyiJ61FLQSI4uI2W5rOqSo7qrTSkFTeQKfMTFMs7l0xfvM8piOPjzPea/z/gf9cH5UnavUKNqMGWnmMlUgaYL32y+4oH+T8FKbi0n9IXgN9SSW8exg62t2BLtEc6zvfXbKUXxXd8cDI1iaMoRdcjW41NG+/l0ofV/dBfRe5+XipamOBHES9Kikz1lpYF7kkipMaLBSN5gMI/MHkUQzGF5Dcd2al5UTq8VzwJWw/qn+56I8RVMe2UfYYu7UvjxSIHChLCHthd5J+sOT3rSBm6FQAXLaVLQj9IdXzB4COlqzaXR0M6HSQ9HEUQJ6AawD2bU0yzs0BHdnFluPkbBnAYzZHSLpC/5xnzurHl7Pr5Jwrdh7/rxH7WfF7k9o4KX9uybOT1/gA1VdX2Sss3w+gfMVAAPDSonf9r8IvoQLd6x9i+1ep8x
Steps to reproduce
- create a
<Suspense> boundary with two async components as children
- the first async component (
AsyncA) must resolve slower (multiple microticks via await Promise.resolve().then().then())
- the second async component (
AsyncB) must resolve faster (single microtick via await Promise.resolve()) and render a component tree that forwards slots (e.g. Outer -> Inner -> slot content)
What is expected?
No warnings. The slot is invoked correctly inside a render function.
What is actually happening?
A false Slot "default" invoked outside of the render function warning is shown.
System Info
Any additional comments?
I think that this is a microtask ordering issue between withAsyncContext and registerDep in Suspense.
From my quick testing, the currentInstance of AsyncA seems to leak into AsyncB. If that is the case, this means that the effect scope leaks too, which could cause other problems with reactivity cleanup.
Vue version
3.5.31
Link to minimal reproduction
https://play.vuejs.org/#eNqtU01v2zAM/SuELnEAw8aQ7VI4HZKth+6wFstu81B4DuO4kyVDH26GwP99lGxnhpemPVQXm+Sj+Eg+HdmqrqPGIrtiic5VWRvQaGwNPBPFMmVGp+w6FVBWtVQGPuMvW6z0H5GvYKdkBbMoHvncTbNz6PUZ9LpHJ3FXmMqQYbCqeWbQFYVkY3WNQncW2duy6X/JGJOJz7nXJ3cSD5lJPLoziUflWEjd5lLsyiJ61FLQSI4uI2W5rOqSo7qrTSkFTeQKfMTFMs7l0xfvM8piOPjzPea/z/gf9cH5UnavUKNqMGWnmMlUgaYL32y+4oH+T8FKbi0n9IXgN9SSW8exg62t2BLtEc6zvfXbKUXxXd8cDI1iaMoRdcjW41NG+/l0ofV/dBfRe5+XipamOBHES9Kikz1lpYF7kkipMaLBSN5gMI/MHkUQzGF5Dcd2al5UTq8VzwJWw/qn+56I8RVMe2UfYYu7UvjxSIHChLCHthd5J+sOT3rSBm6FQAXLaVLQj9IdXzB4COlqzaXR0M6HSQ9HEUQJ6AawD2bU0yzs0BHdnFluPkbBnAYzZHSLpC/5xnzurHl7Pr5Jwrdh7/rxH7WfF7k9o4KX9uybOT1/gA1VdX2Sss3w+gfMVAAPDSonf9r8IvoQLd6x9i+1ep8x
Steps to reproduce
<Suspense>boundary with two async components as childrenAsyncA) must resolve slower (multiple microticks viaawait Promise.resolve().then().then())AsyncB) must resolve faster (single microtick viaawait Promise.resolve()) and render a component tree that forwards slots (e.g. Outer -> Inner -> slot content)What is expected?
No warnings. The slot is invoked correctly inside a render function.
What is actually happening?
A false
Slot "default" invoked outside of the render functionwarning is shown.System Info
Any additional comments?
I think that this is a microtask ordering issue between
withAsyncContextandregisterDepin Suspense.From my quick testing, the
currentInstanceofAsyncAseems to leak intoAsyncB. If that is the case, this means that the effect scope leaks too, which could cause other problems with reactivity cleanup.