Laravel Mix アップデートで、「Error: Cannot find module ‘webpack-cli/package.json’ Require stack:」にハマった話

Laravelでアプリ作成中に、とあるライブラリをインストールしたところ、

found 1 moderate severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details

【google翻訳】
中程度の重大度の脆弱性が1件見つかりました
それらを修正するには `npm audit fix`を実行するか、詳細については` npm audit`を実行します

と言われたので、「npm audit」を実行してみた。

# Run npm install –save-dev laravel-mix@6.0.18 to resolve 1 vulnerability
SEMVER WARNING: Recommended action is a potentially breaking change

Laravel-mixのバージョン6をインストールしなさい。との事。
現在のバージョンが5だったので6にアップデートしてみた。

問題解決の記録

Laravel-mixのアップデート

すると、

found 0 vulnerabilities

どうやら脆弱性はなくなった模様。

コンパイルエラー

しかし!「npm run dev」などのコマンド実行でエラー!

[webpack-cli] Error: Unknown option ‘–hide-modules’

調べてみると、Laravel-mixのバージョン5系から6系で中身が大分変わっているらしい。

package.jsonの編集

こうなっているところを、

こうしろ。と言っているが、自分のとはちょっと違う。。。

とりあえず、こうしてみた。

webpack.mix.jsの編集

あと、webpack.mix.jsの編集も必要らしい。

ここを、

こうするらしい。Vueがバージョン2系なら、

こうするらしい。Reactの場合は、

との事。

改めて、「npm run dev」を実行してみる。

We will use “npm” to install the CLI via “npm install -D webpack-cli”.
Do you want to install ‘webpack-cli’ (yes/no):

「webpack-cli」をインストールするよ!っていうから許可してあげた。すると、

またエラー

Error: Cannot find module ‘webpack-cli/package.json’
Require stack:

調べてみてもそれらしい解決方法が見つからず、「node.js」のバージョン確認したり「webpack-cli」のバージョンを下げてみたりしたけど、ずっと

Error: Cannot find module ‘webpack-cli/package.json’
Require stack:

もうこのエラー見飽きたので、結局最終手段。

パッケージ入れ直し

パッケージ全部消したった。そしておもむろに

全部入れ直した。これで「npm run dev」を実行してみる。
エラーが出るも以下のメッセージが。

Finished. Please run Mix again.

その言葉を信じて、もう一度「npm run dev」

webpack compiled successfully

(゚∀゚)キタコレ!!

追記

その後、アプリ上で以下のエラーを確認しました。

Uncaught TypeError: Vue.component is not a function

Vueの呼び出しに問題がありそう。調べてみると「app.js」を修正すると良いらしい。

app.jsの編集

以下の箇所を、

こうすると、

エラーは消えました。