pilat
517
2
Mix

Single-file components: Failed to mount component: template or render function not defined.

Posted 11 months ago by pilat

Hi,

I've trying to migrate from elixir to mix in my Laravel 5.3 project. What I've done so far:

  1. Rewritten package.json to be "like in laravel 5.6":
  "devDependencies": {
    "axios": "^0.18",
    "babel-preset-react": "^6.24.1",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.1",
    "gentelella": "^1.4.0",
    "laravel-echo": "^1.4.0",
    "laravel-mix": "^2.0",
    "laravel-vue-pagination": "^1.2.0",
    "portal-vue": "^1.3.0",
    "pusher-js": "^4.2.2",
    "vue": "^2.5.7",
    "vuedraggable": "^2.16.0"
  },

Note: I'm loading jQuery and some other "non-vue" libs from CDN, so, they're not in this list.

  1. Clean-reinstalled all dependencies: rm -rf node_modules package-lock.json && npm cache clear --force && npm install

  2. In resources/js/bootstrap.js, replaced vue-resource with axios:

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

Vue.prototype.$http = axios;

  1. Added function mix(...) implementation to my app/helpers.php

  2. "converted" gulfile.js to webpack.mix.js:

let mix = require('laravel-mix');
mix.sass('resources/assets/sass/app.scss', 'public/css')
   .sass('resources/assets/sass/accounts_custom.scss', 'public/css')
   .sass('resources/assets/sass/map.scss', 'public/css')
   .sass('resources/assets/sass/calendar.scss', 'public/css');

mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/map.js', 'public/js')
   .react('resources/assets/js/calendar.js', 'public/js');
   // … few more deps

if (mix.inProduction()) {
    mix.version();
}
  1. Built the project: npm run dev

Now, in my browser, I get errors like this in every place, where any component from .vue file is referenced:

map.js:1449 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Waiter> at resources/assets/js/map_components/Waiter.vue
       <Root>

, here's how this specific component is plugged in:

Vue.component('waiter', require('./map_components/Waiter.vue'));

But, the problem is the same with any component…

What am I missing?

Please sign in or create an account to participate in this conversation.