Monday, 26 August 2019

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

Consider the following component template...

<template>
  <Unknown></Unknown>
</template>

Where Unknown may or may not be a globally registered component. At runtime, I'll be encountered with an informative run-time error as such...

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

[...]

Which is great, however, for my use case I'd like to enforce that no such occurrences such as this happen at built time. Specifically, vue-cli-service build will perform a successful build, which will the surface the run-time error (useless at this point)

I'm curious if there is a way to introspectively capture this potential problem and force a build failure. I was hoping to discover a --strict flag (or the like) which disallows situations such as this, but to no avail.

I've even experimented with the template-compiler and the component-compiler to see if I could catch it on a manual inspection and shockingly no errors were reported.

Any ideas?


Here is my mentioned experiment in more detail using the even lower level component-compiler-utils. This should be portable to observe the same results. Notice how both error reporting fields are empty!

"dependencies": {
  "@vue/component-compiler-utils": "3.0.0",
  "vue-template-compiler": "2.6.10"
}
[...]

const ccu = require('@vue/component-compiler-utils');
const vtc = require('vue-template-compiler');

const file = `
<template>
  <div class="component">
    <Unknown></Unknown>
  </div>
</template>

<script>
  export default {
    name: 'Component',
    data: function () {
      return {}
    },
  }
</script>

<style scoped lang="scss">
  .component {
    width: 100px;
    height: 100px;
  }
</style>
`;

const parsed = ccu.parse({
  compiler: vtc,
  source: file,
  needMap: false
});

const compiled = ccu.compileTemplate({
  compiler: vtc,
  source: parsed.template.content,
});

console.log('parsed | errors', parsed.errors);     // [] empty!
console.log('compiled | tips', compiled.tips);     // [] empty!
console.log('compiled | errors', compiled.errors); // [] empty!



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

No comments:

Post a Comment