Seems to be my issue exactly:
https://github.com/JeffreyWay/laravel-mix/issues/1627#issuecomment-409523809
Hi,
I've trying to migrate from elixir to mix in my Laravel 5.3 project. What I've done so far:
"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.
Clean-reinstalled all dependencies: rm -rf node_modules package-lock.json && npm cache clear --force && npm install
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;
Added function mix(...) implementation to my app/helpers.php
"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();
}
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?
A workaround ("kostillie"): replace all .js with .react.
mix.react('resources/assets/js/app.js', 'public/js')
.react('resources/assets/js/map.js', 'public/js')
.react('resources/assets/js/calendar.js', 'public/js');
// … few more deps
Please or to participate in this conversation.