Dynamic components do not trigger "Failed to resolve component" warning

[leondeklerk]

Vue version

3.3.11

Link to minimal reproduction

https://stackblitz.com/edit/vue-dsetmr?file=src%2FApp.vue

Steps to reproduce

• On load, no content and warnings are shown.
• Comment out case B (line 6)
• A [Vue warn]: Failed to resolve component: hello-world warning is shown

What is expected?

A dynamic component that loads a component that is not imported should throw a "Failed to resolve" warning, similar to how a direct use of a component that is not imported does.

What is actually happening?

A dynamic component, referencing a component which is not imported, does not show a "Failed to resolve" warning. If the same component is used directly, but not imported, it does show the warning correctly

System Info

No response

Any additional comments?

In our project, we decided to remove our global components, but some of these global components were used in dynamic components. In our case, we ended up with warnings for all statically used components with missing imports, but no warnings for dynamically used components. This resulted in some parts of our application missing without any indication.

[yyx990803]

This is somewhat by design because <component is="..."> can be used to render native tags or custom elements. We don't want to throw failed resolution warnings in such cases.

For static components, native tags or custom elements are already ruled out at the compilation phase so we can be sure they are resolving for components only.

We could add some way to indicate the dynamic component should resolve for components only, although I'm not sure how much that would help in your specific case.

[leondeklerk]

Yes, I understand what you mean, and the proposed solution where it would only resolve for components would indeed not be enough as we sometimes have dynamic components that can be either a native tag or a component depending on user input/state.

I'm not sure what exactly is possible and how Vue works internally, but I would think that on render you could check against a list of native tags, registered custom elements, and components. If it fails to resolve based on that list, a warning is show? At least something happens already, as the component is not rendered. I would assume that in the case where something could not be rendered, this is detectable and a (potentially different) warning is shown?

But again, I am by no means familiar on how Vue works internally, so for all I know this could be on the browser side.

[EspoirBao]

I encountered the same issue. After using AsyncComponent, all errors within the component are replaced, and they now appear as "Unhandled error during execution of component event handler" or similar, which makes it difficult to read. I had to wrap potential error locations with a try-catch block to reacquire error information.

[pikax]

IMO the current behaviour is correct, since you can pass everything to the component, throwing an error because it cannot find the component might be weird when you do:

<component :is="isLink ? 'a': 'span'"/>

Should it warn a or span are not found? How about external custom components (aka component not available in vue to be imported)

I would recommend not using string on is prop, if you want dynamic component, resolve the component in a computed

<script setup>
import MyComp from './MyComp.vue'
import OtherComp from './OtherComp.vue'

const AbComp = Date.now() %2 ? MyComp  : OtherComp;
</script>

That's much error friendly, because the bundler will complain if the file is not found :)