Vue template or render function not defined yet I

2020-02-26 03:15发布

站内问答 / JavaScript
929 15 5

This is my main javascript file:

import Vue from 'vue'

new Vue({
  el: '#app'
});

My HTML file:

<body>
    <div id="app"></div>

    <script src="{{ mix('/js/app.js') }}"></script>
</body>

Webpack configuration of Vue.js with the runtime build:

alias: {
    'vue$': 'vue/dist/vue.runtime.common.js'
}

I am still getting this well known error:

[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)

How come when I don't even have a single thing inside my #app div where I mount Vue, I am still getting a render/template error? It says found in root but there is nothing to be found because it does not even have any content?

How am I suppose to mount if this does not work?

Edit:

I have tried it like this which seems to work:

new Vue(App).$mount('#app');

It make sense because using the el property implies you are 'scanning' that dom element for any components and it's useless because the runtime build does not have a compiler.

Still it is an extremely strange error message to throw, especially when I have my entire #app div emptied out.

Hopefully somebody could confirm my thoughts.

15条回答
叼着烟拽天下
2楼-- · 2020-02-26 03:32

I personally ran into the same error. None of the above solutions worked for me.

In fact, my component looks like this (in a file called my-component.js) : 

Vue.component('my-component', {
    data() {
        return {
            ...
        }
    },
    props: {
        ...
    },
    template:`
        <div>
            ...
        </div>
    `
});

And I imported it like this in another component:

import MyComponent from '{path-to-folder}/my-component';

Vue.component('parent_component', {
    components: {
        MyComponent
    }
});

The weird thing is that this worked in some components but not in this "parent_component". So what I had to do in the component itself was stock it in a variable and export it as default.

const MyComponent = Vue.component('my-component', {
    data() {
        return {
            ...
        }
    },
    props: {
        ...
    },
    template:`
        <div>
            ...
        </div>
    `
});

export default MyComponent;

It could seem obvious but as I said above, it works in 1 other component without this so I couldn't really understand why, but at least, this works everywhere now.

查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
3楼-- · 2020-02-26 03:35

When used with storybook and typescirpt, I had to add

.storybook/webpack.config.js

const path = require('path');

module.exports = async ({ config, mode }) => {

    config.module.rules.push({
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
            {
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                    transpileOnly: true
                },
            }
        ],
    });

    return config;
};
查看更多
0人赞 添加讨论(0) 举报
The star\"
4楼-- · 2020-02-26 03:39

I got same error before I forgot to enclose component content in template element.

I have this initially

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './com/Home.vue';

Vue.use(VueRouter);

Vue.router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
    ]
});

Then in Home.vue I have:

<h1>Hello Vue</h1>

Hence the error:

Failed to mount component: template or render function not defined.

found in

---> <Home> at resources/js/com/Home.vue
       <Root>

Enclosing in element fixed the error:

<template>
   <h1>Hello Vue</h1>
</template>
查看更多
0人赞 添加讨论(0) 举报
你好瞎i
5楼-- · 2020-02-26 03:44

Something like this should resolve the issue..

Vue.component(
'example-component', 
require('./components/ExampleComponent.vue').default);
查看更多
0人赞 添加讨论(0) 举报
祖国的老花朵
6楼-- · 2020-02-26 03:44

I cannot believe how did I fix the issue! weird solution!
I kept the app running then I removed all template tags and again I returned them back and it worked! but I don't understand what happened.

查看更多
0人赞 添加讨论(0) 举报
何必那么认真
7楼-- · 2020-02-26 03:47

If someone else keeps getting the same error. Just add one extra div in your component template.

As the documentation says:

Component template should contain exactly one root element

Check this simple example: 

 import yourComponent from '{path to component}'
    export default {
        components: {
            yourComponent
        },
}

 // Child component
 <template>
     <div> This is the one! </div>
 </template>
查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)