Laravel Mix アップデートで、「Error: Cannot find module ‘webpack-cli/package.json’ Require stack:」にハマった話
- 2021.05.02
- Laravel
- Laravel Mix, npm
経緯
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';
エラーは消えました。
-
前の記事
【Laravel】リレーション先のイベント(deleting)が発火しない 2021.04.28
-
次の記事
【Laravel8】npm audit fixしたらLivewireが動かなくなった 2021.06.17
コメントを書く