• Register
1 vote

Problem :

I have recently started learning about Vue. Please find below my main javascript file:

import Vue from 'vue'

new Vue({

  myel: '#app'


Please find below my HTML file:


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

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


Please find below my webpack configuration of Vue.js with a runtime build:

alias: {

    'vue$': 'vue/dist/vue.runtime.common.js'


But I am facing below listed very well known error:

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

Why am I getting above error when I clearly do not have any thing inside a #app div where I am trying to mount Vue and still facing the template or render error?

How can I fix above error?

9 6 2
3,980 points

Please log in or register to answer this question.

1 Answer

1 vote

Solution :

I can surely fix your issue as I had faced this issue in the past and after making lot of efforts I managed to find solution on it. I was using the Typescript with vue-property-decorator and what happened with me was that my IDE auto-completed "TheComponent.vue.js" instead of "TheComponent.vue". That was the reason behind this error.

So I can surely say that the moral of a story is by any chance if you face above error and if you are using any of the single-file component setup then you must cross check your imports in your router.

5 4 2
17,150 points
Can u show with some Illustrations or example code , tmessy

Related questions

0 votes
1 answer 32 views
Problem: Currently I am using Vue.js 2.5 or Visual Studio Code editor. But I am facing the below listed es-lint warning and I am trying to get rid of it. <template :slot="slotName" slot-scope="props" v-for="slotName in $scopedSlots?Object.keys($scopedSlots):null"> <slot ... :row-field="props.rowField"></slot> </template> I am looking for expert help who can help me in fixing my above vue.js issue.
asked Aug 27, 2020 Raphael Pacheco 4.9k points
0 votes
1 answer 10 views
I am learning about vue js. So if anyone can help in finding interview questions, it will be great. THanks you!!!
asked Dec 14, 2020 Lucky Guy 1.4k points
0 votes
2 answers 2.1K views
Problem : Currently I am using VueJS and Laravel for the project. Following issue started to show lately and it also comes up even in the old git branches. Unchecked runtime.lasterror: the message port closed before a response was received. This error only comes up in Chrome browser.
asked Dec 10, 2019 alecxe 7.5k points
0 votes
2 answers 540 views
Problem : I am new to Programming. I have created a Maven Project, the JavaScript project is cloned as the git sub-module inside Maven Project. My directory structure is as below mavenapp/src/main/javascript/[npm project files] and inside the package.json my test is looking as below : " ... install But it is not working for me.. npm version : 5.5.1 node version : 9.3.0 How can I fix above error?
asked Mar 3, 2020 mphil 2.3k points
0 votes
1 answer 1.9K views
Problem : I am beginner in the node.js .Currently I am trying to install node.js using the below command npm install nodemon --save. But when I try to run a server with below command nodemon server.js. then in my terminal I face below error: &ldquo;Nodemon is not recognized as internal or external command, operable program or batch file&rdquo;
asked Feb 13, 2020 mphil 2.3k points
1 vote
1 answer 618 views
Problem: I am very new to node so I think I am making something extremely wrong here as I am unable to find any info at all by doing research online. I already have the django site and I required the JS charting library so I chose the chart.js. I have ... build a chart. Failed to create chart: can't acquire context from the given item . Please help me in fixing above NodeJs elated error.
asked Jun 4, 2020 Martin K 6.6k points
0 votes
1 answer 125 views
0 votes
1 answer 2.9K views
Problem : I am just starting coding using the nodejs with express. So I simply did this in my file test.js which is into my folder routes : const myexpress = require('express'); const myrouter = new myexpress.Router(); myrouter.get('/test', (req, res) => { res.send(` ... browser, it tells me it Cannot get/test I don't understand why this is happening to me. Please let me know how can I fix this?
asked Jan 23, 2020 jwilliam 3.9k points
0 votes
1 answer 194 views
Problem : I have recently updated the node to 7.2.1 and noticed that there is the warning coming as below : (node:4346) DeprecationWarning: Calling an asynchronous function without callback is deprecated. Why is this 4346 ? I only have 2000 lines of code in the js file, so it must not be the line-number. Where should I look for that code?
asked Dec 10, 2019 alecxe 7.5k points
0 votes
2 answers 3.7K views
Problem : Facing following express issue throw new typeerror('router.use() requires a middleware function but got a ' + gettype(fn))
asked Nov 18, 2019 peterlaw 6.9k points