Subscribe on changes!

Unable to resolve component when using teleport from component in teleport

avatar
Jan 19th 2021

Version

3.0.5

Reproduction link

https://codesandbox.io/s/agitated-hill-gqkmb

Steps to reproduce

Create a component and use teleport to teleport that component to the named div. Then from inside the component that is currently being rendered outside of vue, try to teleport again using vue components specifically. (Regular HTML elements will render fine.)

In the attached link. Click the button to open a dialog. Then from within the dialog, click the "Open teleport Dialog" button. Notice the dialog will not open and you will see the "Unable to resolve "dialog-base" vue warn message.

What is expected?

Should be able to stack teleported Vue components

What is actually happening?

Unable to stack teleported vue components.


I could very will be using a bad pattern, but my use case is a dialog that will have to call another dialog with data from the current open dialog. Both of the dialogs being teleported outside the vue app, while the second dialog, being from the already teleported component.

avatar
Jan 19th 2021

You should import and register the DialogBase component in the TeleportDialog, see: https://codesandbox.io/s/purple-browser-yb7r6?file=/src/components/TeleportDialog.vue

avatar
Jan 19th 2021

Hello @HcySunYang , thanks for the reply. That was an easy error on my part trying to demonstrate the problem. Thanks for the fix. However, going through this exercise has made me realize that RC doesn't seem to be inside of the Teleport. See the below screenshot of my app instance that is being built from 'runtime-core.esm-bundler.js'. I have a breakpoint on line 4204 which is the mountComponent method. I have it paused where the 'App' component of my real application is being mounted. This is where I have my dialogs and I use the vuex store to show/hide them as they are root to the application. Most of them have the NormalDialog component within them and it lives in the same location as you would think; however, the 'ContentDialog.components.NormalDialog = undefined' while the 'MessageDialog.components.NormalDialog = Object".

Are these better details to try and isolate the problem? Why would the same component be undefined in one component and found in another? Do to workflow, I am using the build --watch flag for my development environment. Could that be the problem?

content-dialog MessageDialog Vue-runtime

avatar
Jan 21st 2021

Hello @HcySunYang , any update on the above?