Laravel Mixパッケージをupgradeしたらnpm run dev
で下記エラーが出るようになった(T . T)
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
(省略)
webpack compiled with 3 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
webpack.mix.jsを修正して解消
.vue()
を追記すればOK
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js').vue() // ⭐️ 追記
.sass('resources/sass/app.scss', 'public/css');
Uncaught TypeError: Vue.component is not a functionが出た場合
resources/js/app.js
を下記のように変更すると解消される!
// window.Vue = require('vue');
import Vue from 'vue';
Laravel Mix 6で仕様変更になったのが原因だった
(参考) https://laravel-mix.com/docs/6.0/upgrade#api-for-javascript-frameworks