Can I fail a Vue.js build on unregistered components?

I'm sorry to say that I think the answer is that this is not possible. Please review the Component Registration section of the documentation for the background information related to my explanation.

Since:

  1. Components can be registered dynamically (Vue.component('MyComponent', { /* ... */ }) at any time during the lifetime of a Vue application.
  2. Components can be added by plugins and even asynchronously after initialization.
  3. Components can be used dynamically.
  4. Component names are simple strings as opposed to some form of enum or equivalent "fixed" registry of allowed names in the application.

There is no general way for a code analyzer to achieve what you ask. Considering the above, I'm not surprised that none of the options you tried report errors. Indeed the opposite would be surprising because it would not work with components registered by plugins. Really, there is no other way to know before run-time if a named component is available or not.

That said, I tried writing a unit test that instantiates a component that uses an unknown component. I get the same "Unknown custom element..." warning in the console, but since nothing is thrown, the test does not fail! Bummer... I took a peek at the source code for that warning and unfortunately nothing is registered anywhere to record the missing component.

Another option is to do that unit test that mounts the component and then check via vm.$refs or DOM elements whether the desired component was actually rendered. It seems like a big hassle though and a lot of maintenance.

But, I think I found a nice hook to get the warning! Check out Vue.config.warnHandler. You can add a warnHandler in the test that mounts the component and checks that no warnings about missing elements are emitted.


You can try pre-rendering couple of routes and check for errors on those pages. Probably you can't be 100% sure but at least you can cover most important pages.

This plugin might come handy to do that: https://www.npmjs.com/package/vue-cli-plugin-prerender-spa


above this comment about vue distintive reactjs is syntactic of sugar with jsx, if this component is created we can say that it can do, ok, on an unknown component, it cannot do said to render async because it's ready async, conclusion: the warnings is prevent on json config with server options, on vue this options is active withow module, aditional can you install module for detail warnings, on mode development, this mode by default is null