【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! 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');

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

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

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

resources/js/app.jsを下記のように変更すると解消される!

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

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