Laravelでnpm run devを実行した時に、下記のエラーが出たときの対策を説明します。
6 WARNINGS in child compilations (Use ‘stats.children: true’ resp. ‘–stats-children’ for more details)
webpack compiled with 6 warnings
なお、このエラーを解決した後に autoprefixerに関するエラーが出ることがありますが、こちらについても解決方法を解説しますね。
わたしは最近、Laravel BreezeとLaravel Livewireでプロジェクトを新規作成した時に、このエラーに遭遇しました。
LaravelでWARNINGS in child compilations エラーが出たときの対策
手順は下記のとおりです。
① webpack.mix.js ファイル編集
webpack.mix.jsファイルに、下記コードを加えます。
これによって、エラーの詳細が表示されるようになります。
|
1 2 3 4 5 |
mix.webpackConfig({ stats: { children: true } }); |
【コード追加後のwebpack.mix.js】
② npm run dev実行
再び、npm run devを実行します。
|
1 |
npm run dev |
すると、エラーの詳細が表示されます。
わたしの場合は、次のエラーメッセージが表示されました。
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
どうやらautoprefixerが問題の様子。
autoprefixerは、自動的にベンダープレフィックスを付けてくれるツールです。Laravel Mixに最初から含まれているパッケージとなります。
調べてみたところ、autoprefixerのバージョンによってエラーが発生するようで、バージョンを10.4.5に変更すると直るとの情報を得ました。
どのようにバージョンを変更するか、手順を解説していきます。
わたしの場合、autoprefixerのバージョンは 10.4.2でした。インストールしたautoprefixerのバージョンは、package.jsonファイルを見ると確認できます。
③ package.jsonファイルの編集
package.jsonファイルの中のautoprefixerのバージョンを10.4.5に変更します。
このとき、バージョンの最初のキャレット ^ は外しておいてください。
④ package-lock.jsonファイルを削除
インストール済みバージョン名が記載されているpackage-lockファイルを削除しておきます。
⑤ npm install と npm run devを実行
package.jsonに書いた条件でパッケージをインストールし直します。
そのために、まずは、npm installを実行します。
|
1 |
npm install |
次に npm run devコマンドを実行します。
|
1 |
npm run dev |
処理後、package-lock.jsonファイルが新たに作成されます。
ファイルの中身を確認してみてください。
autoprefixerのバージョンは、10.4.5になっているはずです。
⑥ おまけ：コマンドでもいけます。
上記の処理は、下記コマンドでも実行できます。
Laravel8の場合など、package.jsonにautoprefixerが表示されないこともあります。その場合は、コマンドを使ってください。
|
1 |
npm install autoprefixer@10.4.5 --save-exact |
指定したバージョンが正確に入るよう、必ず –save-exactを加えてください。
コマンドのほうがラクですが、現在のバージョンを確認して、編集したほうが分かりやすいため、本記事では、package.jsonを編集する方法をメインに紹介しました。
さいごに
エラー対策は以上です。
なお今回、autoprefixerについては、下記のサイトを参考にさせてもらいました。
なおautoprefixerを10.4.5にしてもだめだったものの、現在の最新版である10.4.7をいれたら直ったという人もいました。
もし同じようにバージョンを10.4.5に変えても解決しなかった場合は、試してみてください。
また「npm run devとか、package.jsonとか、一体何だったんだろう？」と思ったら、こちらの記事を参考にしてくださいね。
このあたり、地味に大事なポイントです。
絵を使って、分かりやすく解説してます。
