Skip to content

Slotted Vue custom element children within async Vue custom elements error during instance creation #9341

@misaacs21

Description

@misaacs21

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vue-async-custom-element-slotted-child?file=src%2FApp.vue

Steps to reproduce

Wait for the app to boot and open the browser console. Error occurs before the slotted component's Vue instance is fully created.

What is expected?

The slotted component's Vue instance is created and mounted without error.

What is actually happening?

Before the async component's Vue instance is fully created, the slotted component attempts to create its own, resulting in this error:

Uncaught TypeError: Cannot read properties of null (reading 'provides')
    at vnode.ce (vue.js?v=974b663c:9664:50)
    at createComponentInstance (vue.js?v=974b663c:8543:11)
    at mountComponent (vue.js?v=974b663c:6978:47)
    at processComponent (vue.js?v=974b663c:6963:9)
    at patch (vue.js?v=974b663c:6436:11)
    at Object.render2 [as render] (vue.js?v=974b663c:7730:7)
    at render (vue.js?v=974b663c:10516:20)
    at VueCustomElement._update (vue.js?v=974b663c:9628:5)
    at resolve2 (vue.js?v=974b663c:9565:12)
    at VueCustomElement._resolveDef (vue.js?v=974b663c:9571:7)

This occurs if the slotted component is async as well, and when it's not the first element within the slot (ie. nested in a div).

System Info

No response

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions