【Laravel】 NPMの--hide-modulesに関するエラーについて

2021年2月頃にnpm run devコマンドを実行した際に、下記のエラーが発生しました。

error: unknown option '--hide-modules'

調べたところ、webpackとlaravel-mixのバージョンアップによる互換性の問題のようでした。結構はまってしまったので、エラーを解消するために行なったアップデートの手順をまとめます。

手順

Nodeのバージョンが影響するので、開発環境（ローカル環境）だけでなくサーバー環境の方でも対応が必要でした。まずは、開発環境での手順から記述していきます。

開発環境側の手順

nodejsをLTS版にアップデートする。
yarnをインストールする

npm install --global yarn
yarn --version

プロジェクトルートからnode_modulesとpackage-lock.jsonを削除する

rm -rf node_modules
rm package-lock.json

npm installを実行する
laravel-mixの最新版をインストールする

npm i --save-dev laravel-mix@latest

package.jsonのscriptsセクションを書き換える

"scripts": {
    "dev": "npm run development",
    "development": "npx mix",
    "watch": "npx mix watch",
    "prod": "npm run production",
    "production": "npx mix -p"
},

プロジェクトルートのwebpack.mix.jsに.vue()を追記する

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

resources/js/app.jsファイルにてvueをインポートするコードを修正する

window.Vue = require("vue"); // この行を削除して
↓
import Vue from 'vue'; // この行を追加する

npm run devまたはnpm run prodを実行する
ローカル環境でサイトが正常に動くことを確認する

エラーが表示されなければ以上です。

サーバー側手順

以下の手順を行うと、サイトが一時的に機能しなくなる可能性があるので、開発環境でデプロイの準備が整ってから行います。

nodejsをLTS版にアップデートする。
yarnをインストールする

npm install --global yarn
yarn --version

プロジェクトルートからnode_modulesを削除する

rm -rf node_modules

完了したら、npm installやnpm run prodなどの実行を含め、開発環境のコードをデプロイします。動作確認ができたら、作業は完了です。

参考サイト

https://github.com/JeffreyWay/laravel-mix/issues/2521

https://laravel-mix.com/docs/main/upgrade

https://laravel-mix.com/docs/main/vue

追記（2021年6月29日）

後日、別プロジェクトで以下のようなエラーが発生したのですが、上記と同じ手順で解決することができたのでここに追記しておきます。

cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

~/projectfolder/node_modules/webpack-cli/bin/cli.js:93
                                 throw err;
                                 ^

Error: PostCSS plugin postcss-discard-comments requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
・・・
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ 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`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
・・・