Cannot set property 'render' of undefined

Question

I got problem with vuejs, please help me

I have main.js:

    import App from './App.vue'
    import routes from './app.router';
        Vue.use(BootstrapVue);
        
        new Vue({
            el:'#app',
            render: h => h(App),
            created(){
            },
            router: routes,
            methods:{
        
            }
        })

My file App.vue:

    <template>
        <div id="app" class="">
            <menu-header> </menu-header>
            <router-view> </router-view>
        </div>
    </template>
    
    
    <script>
    import menuHeader from './components/layout/menu-header.vue'; // error when i import this component
    components:{
        menuHeader
    }
    </script>

This is my menu-header.vue:

     <template>
        <ul>
            <li>
                Hello           
            </li>
        </ul>
     </template>
    
     <script>
     export default {
        name: "menuHeader"
     };
    
     </script>

My problem is when i add menu-header component, my page give me error:

Cannot set property 'render' of undefined

But if I don't, it run normally. Please explain why and help me fix it. Many thanks.

Answer 1

It looks like you are not exporting Vue component definition properly from App.vue file:

<template>
    <div id="app" class="">
        <menu-header> </menu-header>
        <router-view> </router-view>
    </div>
</template>


<script>
    import MenuHeader from './components/layout/menu-header.vue'; // error when I import this component

    // Code is missing export
    export default {
        components: {
            MenuHeader
        }
    }
</script>