Subscribe on changes!

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

avatar
Oct 4th 2023

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

avatar
Nov 6th 2023

For those who have the same problem. While #9351 is not merged, we could already use it with vue 3.3.7 and https://github.com/ds300/patch-package