Exploring a component template...
<template>
<Unknown></Unknown>
</template>
In the context of this template, Unknown could be either a globally registered component or not. Upon encountering this scenario at runtime, an informative error is raised:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[...]
However, it is desired to avoid such errors during build time rather than runtime. Currently, a successful build is executed by vue-cli-service build, only for the error to surface later (which is unhelpful).
The query arises if there exists a way to proactively detect and prevent such issues before build completion. Is there a possible solution like a --strict flag that can enable rejection of such occurrences?
Even after attempting manual inspections using tools like template-compiler and component-compiler, no errors were found which was surprising.
Any thoughts on how to tackle this issue?
A detailed experiment with even lower-level component-compiler-utils has been conducted to analyze the situation more closely. The absence of any reported errors in both fields is intriguing!
"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!