Skip to content

False "Slot invoked outside of the render function" warning with multiple async components in Suspense #14667

@cernymatej

Description

@cernymatej

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

  1. create a <Suspense> boundary with two async components as children
  2. the first async component (AsyncA) must resolve slower (multiple microticks via await Promise.resolve().then().then())
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions