Vue-devtools: Dynamically imported component error

[andris310]

Version

Browser and OS info

Chrome 73.0.3683.86 / MacOS Mojave 10.14.2

Steps to reproduce

When dynamically importing Vue components

Vue.component(componentName, () => import(`${componentPath}.vue`));

(I use this to render component in a modal)

getting error:
[Vue warn]: Unknown custom element: <ComponentName> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

To reproduce:

1. Refresh Chrom tab then open app where a dynamically imported component can be rendered
2. Do NOT navigate to VueDevtools tab in Chrome devtools
3. Render the dynamic Component A.
4. Observe that component gets rendered without an error.
5. Open Chrome dev tools and navigate to VueDevtools tab.
6. Try to render a dynamic Component B.
7. Observe above-mentioned error in Chrome dev tools console.
8. Observe that Component A can still be rendered without an error.

If I register all the components manually in the main app file before initializing, all the components work fine even when VueDevtools are open.

What is expected?

Expected to render dynamic components the same way with or without VueDevtools open

What is actually happening?

The issue only happens when VueDevtools (5.0.6) is open in Chrome.

[Akryum]

Please provide a runnable reproduction. I couldn't reproduce on dev branch.

[fweibel]

Here is a runnable reproduction

https://github.com/fweibel/dynamicimportbug

Steps:

• clone repo
• npm install
• npm run serve
• Open in Chrome
• F12 to open console (with vue-devtool extension activated)
• refresh
• click on the button "import"
• the error described above should prompt in the console

If the vue-devtool extension is not loaded/activated, the component will be loaded without any problem.

Thank you for your help on this.

[zozoh]

How it going? I meet the same situation. If the devtools is closed, anything work well.

[sp00x]

I'm having a similar issue here - it seems the "Vue" reference is suddenly something completely different when DevTools is active - seems localized to where it's being called from, so that components end up being registered in different contexts, and thus are unknown when referenced elsewhere. I've dumped
Vue.options.components in locations where I call Vue.component(), and I get blank objects, compared to ones filled with what I am expecting elsewhere

(I even went as far as storing the Vue argument as passed to the plugin's install() method internally somewhere to test - and using it to call Vue.component() instead of one from import Vue from 'vue' - but they still end up being registered somewhere else, isolated..)

[andris310]

Any chance this would get fixed?

[ezef]

The same happens to me over here, in fact I found this issue while googling the strange behavior. vue-devtools version 5.3.3

[WizardNinja]

Same thing happens to me too :(

[sp00x]

Reading the title of #1013 ("Can't register dynamic components outside of life-cycle hooks with vue-devtools open") inspired me to try a _horrible_ hack, that sorta works in my case because I have references to the comps:

Use <component :is="yourDynamicallyLoadedComponent" /> :Ø