LaravelでWARNINGS in child compilations エラーとautoprefixerに関するエラーが出たときの対策

Laravel Breeze

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に関するエラーが出ることがありますが、こちらについても解決方法を解説しますね。

Junko
Junko

わたしは最近、Laravel BreezeとLaravel Livewireでプロジェクトを新規作成した時に、このエラーに遭遇しました。

LaravelでWARNINGS in child compilations エラーが出たときの対策

手順は下記のとおりです。

① webpack.mix.js ファイル編集

webpack.mix.jsファイルに、下記コードを加えます。

これによって、エラーの詳細が表示されるようになります。

【コード追加後のwebpack.mix.js】

② npm run dev実行

再び、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に変更すると直るとの情報を得ました。

どのようにバージョンを変更するか、手順を解説していきます。

Junko
Junko

わたしの場合、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を実行します。

次に npm run devコマンドを実行します。

処理後、package-lock.jsonファイルが新たに作成されます。

ファイルの中身を確認してみてください。

autoprefixerのバージョンは、10.4.5になっているはずです。

⑥ おまけ:コマンドでもいけます。

上記の処理は、下記コマンドでも実行できます。

Laravel8の場合など、package.jsonにautoprefixerが表示されないこともあります。その場合は、コマンドを使ってください。

指定したバージョンが正確に入るよう、必ず –save-exactを加えてください。

 

コマンドのほうがラクですが、現在のバージョンを確認して、編集したほうが分かりやすいため、本記事では、package.jsonを編集する方法をメインに紹介しました。

さいごに

エラー対策は以上です。

なお今回、autoprefixerについては、下記のサイトを参考にさせてもらいました。

なおautoprefixerを10.4.5にしてもだめだったものの、現在の最新版である10.4.7をいれたら直ったという人もいました。

もし同じようにバージョンを10.4.5に変えても解決しなかった場合は、試してみてください。

また「npm run devとか、package.jsonとか、一体何だったんだろう?」と思ったら、こちらの記事を参考にしてくださいね。

Junko
Junko

このあたり、地味に大事なポイントです。

絵を使って、分かりやすく解説してます。

Laravel Breeze Laravel・PHP豆知識・トラブル対策

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

Laravel関連のご相談承ってます♪
「Webアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Laravel関連のご相談承ってます♪
「Webアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました