laravel6でlaravel-mix6にupgradeしたらエラーが続出した（vueもエラー）

きっかけ

laravel6でlaravel-mixを6にupgradeしたら、いろいろとエラーが発生しました。
そのうえ、vueも正しく表示されなくなったので、備忘録も含め解決方法を投稿しておきます。

環境

• windows10
• wsl2
• laravel：6.20.34
• php：7.4.3
• composer：2.1.8
• laravel-mix：6.0.31
• node：14.15.4
• npm：6.14.10

まずはvueが正常に使えるのを確認

laravel6にlaravel/uiをインストール
※laravel6公式サイトより

composer require laravel/ui "^1.0" --dev

php artisan ui vue

Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

// 認証機能も使いたい場合は末尾に--authをつける（下記参照）
// php artisan ui vue --auth

package.jsonにてlaravel-mixのバージョンをチェック
現状は5系になっていることを確認

{
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1", // 現状は5系になっている
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

welcome.blade.phpに下記を追記してvueのcomponentを使えるかチェック

// (省略)
	<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>

// (省略)
<div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>

/* ここを追記 */
                <div id="app">　
                    <example-component></example-component>
                </div>
/* ここまで */
                <div class="links">
// (省略)

// (省略)
	<script src="{{ mix('js/app.js') }}"></script>
</body>

npmを実行

npm i && npm run dev

laravel標準のローカル開発サーバを起動してチェック

php artisan serve

Laravel development server started: http://127.0.0.1:8000

http://127.0.0.1:8000 へアクセス
vueのcomponentが正しく表示されていることを確認

問題はここから！！！

laravel-mixを6へupgrade

理由は忘れたけど、laravel-mixを最新版へアップグレードすることになり下記を実行

npm i laravel-mix@latest

環境構築しようとnpm run devしたところ、エラー続出！！

npm run dev

ERROR in ./resources/js/components/ExampleComponent.vue 1:0
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>
|     <div class="container">
|         <div class="row justify-content-center">

webpack compiled with 1 error
Notifications are disabled
Reason: DisabledForApplication Please make sure that the app id is set correctly.
Command Line: snoretoast-x64.exe -appID "Laravel Mix" -pipeName /tmp/notifierPipe-5eb8fb43-5fb4-4b91-ab87-d555b09526ef -p /mnt/c/Users/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.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nobusada/.npm/_logs/2021-09-27T02_18_38_749Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

原因

調査したところ、laravel-mixの6系ではpackage.jsonやwebpack.mix.jsの書き方が変わった模様。
公式サイトの手順に沿って記述を変更

まずはpackage.jsonを変更

変更前

"scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },

変更後

"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
}

続いてwebpack.mix.jsを変更

※下記の箇所のみ変更

変更前

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

変更後

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css').vue();

再度、npmの実行

npm i && npm run dev

すると、下記が表示される

Finished. Please run Mix again.
 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`
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.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nobusada/.npm/_logs/2021-09-27T02_30_16_184Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

ちょっと焦るが、Please run Mix again とあるので、もう一度npmを実行

npm run dev
webpack compiled successfully

無事にnpmは実行された。

ここでもう一つ問題発生！！

vueのcomponentが表示されない。
laravelのローカル開発サーバを起動してwelcome.blade.phpのページを表示してもcomponentが表示されていない。。。

chromeのデベロッパーツールでconsole（コンソール）を確認してみると下記の表示あり

Uncaught TypeError: Vue.component is not a function

これもいろいろと調査してみたところ、resouces/js/app.js で下記の箇所を変更する必要があるとのこと。

変更前

window.Vue = require('vue');

変更後

window.Vue = require('vue').default;

再度、npm実行・ローカル開発サーバを起動してチェック

// npm実行
npm run dev

// ローカル開発サーバ起動
php artisan serve

http://127.0.0.1:8000 へアクセス

vueのcomponentが正しく表示されていることを確認。解決！

そもそもlaravel6でlaravel-mix6を使うのが間違いなのかもしれない。。。
※laravel6ではデフォルトでlaravel-mixの5系がインストールされているので

参考

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

• Uncaught TypeError: Vue.component is not a function · Issue #2747 · laravel-mix/laravel-mix