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のアップデート

npm install --save-dev laravel-mix@6.0.18

すると、

found 0 vulnerabilities

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

コンパイルエラー

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

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

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

package.jsonの編集

"scripts": {
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --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",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

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

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

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

"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の編集

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

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

ここを、

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

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

mix.js('resources/js/app.js', 'public/js').vue({ version: 2 });

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

mix.js('resources/js/app.js', 'public/js').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:

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

パッケージ入れ直し

rm -r node_modules

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

npm i

全部入れ直した。これで「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の編集

以下の箇所を、

window.Vue = require('vue');

こうすると、

import Vue from 'vue';

エラーは消えました。