Unable to resolve component when using teleport from component in teleport
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.
You should import and register the DialogBase
component in the TeleportDialog
, see: https://codesandbox.io/s/purple-browser-yb7r6?file=/src/components/TeleportDialog.vue
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?