pilat
1 year ago
134
2
Mix

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

Posted 1 year 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.