【Laravel Mix】 npmのパッケージをupgradeしたらコンパイルできなくなった

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! 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.


  • .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');

Laravel Mix 6で仕様変更になったのが原因だった

(参考) https://laravel-mix.com/docs/6.0/upgrade#api-for-javascript-frameworks

Uncaught TypeError: Vue.component is not a functionが出た場合


// window.Vue = require('vue');
import Vue from 'vue';

\ 案件のご依頼・ご相談はこちらから /