My vue2 component is structured as follows:
<template>
<p>Hello world</p>
</template>
<script>
export default { name: 'Example' };
</script>
<docs>
Some documentation...
</docs>
In addition, I'd like to incorporate a custom loader for my vue files, so my webpack configuration appears like this:
module.exports = {
module: {
rules: [{
test: /\.vue$/,
use: [{
loader: 'vue-loader',
}, {
loader: path.resolve(__dirname, 'CustomLoader.js'),
}],
}],
},
};
Using the following custom loader script:
// CustomLoader.js
module.exports = function(source) {
return source;
}
When running webpack bundle, an error is thrown stating that it requires another loader for the <docs> block, despite the fact that the result from the CustomLoader remains unchanged. The error message reads:
Error in path/to/component.vue?vue&type=custom&index=0&blockType=docs
Module parse failed: Unexpected token
File was processed with these loaders:
* ./node_modules/vue-loader/lib.index.js
* ./CustomLoader.js
You may need an additional loader to handle the result of these loaders.
The issue can be resolved by removing either:
- the
CustomLoader - or the
<docs>tag.
Could someone provide insight on what might be causing this problem?