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公式サイトより](https://readouble.com/laravel/6.x/ja/authentication.html)

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

```bash

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系になっていることを確認

```bash
{
    "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を使えるかチェック

```bash
// (省略)
	<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を実行

```bash
npm i && npm run dev
```

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

```bash
php artisan serve

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

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

![vue-component.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2040830/b1ce20a4-f9a1-a509-d1a9-c415259ffe34.png)


# 問題はここから！！！

## laravel-mixを6へupgrade

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

```bash
npm i laravel-mix@latest
```

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

```bash
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の書き方が変わった模様。
[公式サイト](https://laravel-mix.com/docs/6.0/upgrade)の手順に沿って記述を変更

### まずはpackage.jsonを変更

変更前

```bash
"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"
    },
```

 変更後

```bash
"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を変更

※下記の箇所のみ変更

変更前

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

変更後

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

再度、npmの実行

```bash
npm i && npm run dev
```

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

```bash
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を実行

```bash
npm run dev
webpack compiled successfully
```

無事にnpmは実行された。

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

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

![vue-component_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2040830/ea8bf5dd-52c9-54b8-b352-de52c1ef18d3.png)


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

```bash
Uncaught TypeError: Vue.component is not a function
```

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

変更前

```bash
window.Vue = require('vue');
```

変更後

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

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

```bash
// npm実行
npm run dev

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

[http://127.0.0.1:8000](http://127.0.0.1:8000/) へアクセス

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

![vue-component_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2040830/204759a4-c14b-b8c0-24b4-a6b67e79ef88.png)


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

## 参考

* [【Laravel Mix】 npmのパッケージをupgradeしたらコンパイルできなくなった | Zakkuriブログ](https://zakkuri.life/laravel-mix-npm%E3%81%AE%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%92upgrade%E3%81%97%E3%81%9F%E3%82%89%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%8F/)

* [Uncaught TypeError: Vue.component is not a function · Issue #2747 · laravel-mix/laravel-mix](https://github.com/laravel-mix/laravel-mix/issues/2747)