Slotted Vue custom element children within async Vue custom elements error during instance creation
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
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