Vue template or render function not defined yet I am using neither

Question

This is my main javascript file   import Vue from  vue   new Vue     el    app        My HTML file    lt body gt       lt div id  app  gt  lt  div gt        lt script src     mix   js app js       gt  lt  script gt   lt  body gt    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

User · Answer

I had this script in app js in laravel which automatically adds all components in the component folder  const files   require context       true     vue  i  files keys   map key   gt  Vue component key split      pop   split      0   files key     To make it work just add default const files   require context       true     vue  i  files keys   map key   gt  Vue component key split      pop   split      0   files key  default

User · Answer

My previous code was  Vue component  message   require    components message vue       when i got such errors then i just add  default to it and it worked    Vue component  message   require    components message vue   default

User · Answer

If you used to calle a component like this   Vue component  dashboard   require    components Dashboard vue       I suppose that problem occurred when you update to laravel mix 5 0 or another libraries  so you have to put  default  As like below   Vue component  dashboard   require    components Dashboard vue   default     I solved the same problem

User · Answer

When used with storybook and typescirpt  I had to add       storybook webpack config js   const path   require  path     module exports   async    config  mode      gt         config module rules push           test     ts            exclude   node modules           use                                  loader   ts-loader                   options                        appendTsSuffixTo      vue                         transpileOnly  true                                                          return config

User · Answer

In my case  I was using a default import    import VueAutosuggest from  vue-autosuggest    Using a named import fixed it  import  VueAutosuggest  from  vue-autosuggest

User · Answer

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    lt h1 gt Hello Vue lt  h1 gt    Hence the error   Failed to mount component  template or render function not defined   found in  --- gt   lt Home gt  at resources js com Home vue         lt Root gt    Enclosing in  element fixed the error    lt template gt      lt h1 gt Hello Vue lt  h1 gt   lt  template gt

User · Answer

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   lt template gt        lt div gt  This is the one   lt  div gt    lt  template gt

User · Answer

In my case  I was getting the error because I upgraded from Laravel Mix Version 2 to 5   In Laravel Mix Version 2  you import vue components as follows   Vue component       example-component        require    components ExampleComponent vue        In Laravel Mix Version 5  you have to import your components as follows   import ExampleComponent from    components ExampleComponent vue    Vue component  example-component   ExampleComponent     Here is the documentation  https   laravel-mix com docs 5 0 upgrade  Better  to improve performance of your app  you can lazy load your components as follows   Vue component  ExampleComponent        gt  import    components ExampleComponent

User · Answer

I ll add this here b c there seem to be a number of different reasons why this very frustrating error can appear  In my case  it was a question of syntax in my import statement  I had  import DataTable from    components data-table DataTable     when I should have had  import DataTable from    components data-table      Your project setup and configuration may vary but if you re getting this error I suggest that you check that the import syntax for your component is as expected for your project

User · Answer

Something like this should resolve the issue    Vue component   example-component    require    components ExampleComponent vue   default

User · Answer

There is an update from Laravel Mix 3 to Laravel 4 which may affect the answer for all components See https   laravel-mix com docs 4 0 upgrade for more details   Let  example-component  be the example component  whose address is    components ExampleComponent vue    Laravel 3    Vue component  example-component   require    components ExampleComponent vue       Laravel 4   The change is that a  default is added    Vue component  example-component   require    components ExampleComponent vue   default

User · Answer

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            lt div gt                           lt  div gt              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            lt div gt                           lt  div gt             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

User · Answer

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

User · Answer

The reason you re receiving that error is that you re using the runtime build which doesn t support templates in HTML files as seen here vuejs org  In essence what happens with vue loaded files is that their templates are compile time converted into render functions where as your base function was trying to compile from your html element

User · Answer

As a Summary of all the posts  This error       Vue warn   Failed to mount component  template or render function not defined     You re getting because of a certain problem that s preventing your component from being mounted   This can be caused by a lot of different issues  as you can see from the different posts here  Debug your component thoroughly  and be aware of everything that is maybe not done correctly and might prevent the mount   I was getting the error when my component file was not encoded correctly

User · Answer

In my case  I imported my component  in router  as   import bsw from  common-mod src components webcommon webcommon    It is simply solved if I changed it to  import bsw from  common-mod src components webcommon webcommon vue

User · Answer

I am using Typescript with vue-property-decorator and what happened to me is that my IDE auto-completed  MyComponent vue js  instead of  MyComponent vue   That got me this error    It seems like the moral of the story is that if you get this error and you are using any kind of single-file component setup  check your imports in the router

User · Answer

Make sure you import the  vue extension explicitly like so    import myComponent from    my component my-component vue     If you don t add the  vue and you have a  ts file with the same name in that directory  for example  if you re separating the js ts from the template and linking it like this inside of my-component vue    lt script lang  ts  src    my-component ts  gt  lt  script gt        then the import will bring in the  ts by default and so there really is no template or render function defined because it didn t import the  vue template   When you tell it to use  vue in the import  then it finds your template right away

User · Answer

Yet another idea to throw in to the mix    In my case  the component throwing the error was a template-less component with a custom render   function  I couldn t see why it wasn t working  until I realised that I hadn t put  lt script gt     lt  script gt  tags around the code in the component  seemed unnecessary  since I had no template or style tags either   Not sure why this got past the compiler     Either way    make sure you use your  lt script gt  tags  -

[javascript] Vue template or render function not defined yet I am using neither?

Examples related to javascript

Examples related to vuejs2

Examples related to vue-component

Examples related to vue.js