When attempting to import all components from a folder and display one based on a passed prop, I encountered an error at runtime.
I am using webpack with vue-loader to import all my components, each of which is a *.vue file.
The issue arises when importing components stored in a subfolder. An error message is displayed at runtime:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Test2>
<VoneDocs> at src\components\VoneDocs.vue
<App> at src\App.vue
<Root>
After some research and help from @craig_h, it was determined that the problem stemmed from how the files were being imported:
<template>
<transition name="fade">
<div class="vone-docs" v-if="docName !== undefined">
<component :is="docName"/>
</div>
</transition>
</template>
<script>
import Test from '../assets/docs/Test';
// Importing all docs (*.vue files) in '../assets/docs'
let docsContext = require.context('../assets/docs', false, /\.vue$/);
let docsData = {};
let docsNames = {};
let docsComponents = {};
docsContext.keys().forEach(function (key) {
docsData[key] = docsContext(key);
docsNames[key] = key.replace(/^\.\/(.+)\.vue$/, '$1');
docsComponents[docsNames[key]] = docsData[key];
});
export default {
name: 'vone-docs',
props: ['page'],
components: {
...docsComponents,
Test
},
computed: {
docName () {
return this.page;
},
docFileName () {
return './' + this.docName + '.vue';
},
docData () {
return docsData[this.docFileName];
}
},
beforeRouteUpdate (to, from, next) {
if (to.path === from.path) {
location.hash = to.hash;
} else next();
},
mounted () {
console.log(docsComponents);
}
};
</script>
Although the Test component displays successfully when docName is set to 'test' due to direct import, every other Vue single-file-component imported using require.context() results in the error:
Failed to mount component: template or render function not defined.Is there something wrong with how I’m using require.context()?
Below is my webpack configuration (excluding raw-loader and html-loader, following Vue's webpack-template structure):
// webpack.base.conf.js
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
...(config.dev.useEslint? [{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
}] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.raw\.svg$/,
loader: 'raw-loader'
},
{
test: /\.icon\.svg$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src', 'img:src']
}
}
}
]
}
}
Thank you for any assistance!