LoginSignup
2
2

More than 1 year has passed since last update.

laravel8でjetstreamのインストール手順でnpm run dev時にwarningが出る

Posted at

前提

Laravel8
↓jetstreamのインストール手順の参考
https://readouble.com/jetstream/1.0/ja/installation.html

jetstream、warningの出ているパッケージの内容、解決に使用したパッケージの内容の詳細については調べていないので、解説しておりません。

現象

`npm run dev'の手順の際に以下のようなwarningがコンソールに出力されました。

3 WARNINGS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 3 warnings

解決策

ヒントで、何か設定変更して詳細が見れるようにしろ!みたいなん書いてるけど、どこに書くの?ってなりました。
どのファイルのどの部分に書けばいいかを書いて欲しいよね!

  • どのファイル? webpack.mix.jsに
  • どの部分? 末尾に追記
webpack.mix.js
const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

if (mix.inProduction()) {
    mix.version();
}

// 以下が追記した内容
mix.webpackConfig({
    stats: {
        children: true,
    },
})

これでもう一度npm run devを実行すると

// 最後に以下のようにwarningの詳細が主力するようになりました。
  WARNING in ./resources/css/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./resources/css/app.css)
  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.

  WARNING in ./resources/css/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./resources/css/app.css)
  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.

  WARNING in ./resources/css/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./resources/css/app.css)
  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.

  Child mini-css-extract-plugin /work/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!/work/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!/work/resources/css/app.css compiled with 3 warnings
webpack compiled with 3 warnings

autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.のwarningで共通している

autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
この内容が共通で表示されています。
どうやら、color-adjustっていう表記がどっかにあるようですが、非推奨になっているので、print-color-adjustに変えろってことみたいですね。
公式通りやってるのに。。。

とりあえず上記のメッセージで検索してみますと下のサイトがヒットし、それ通りにやれば解決しました。
https://stackoverflow.com/questions/72083968/1-warning-in-child-compilations-use-stats-children-true-resp-stats-child

下記コマンドを実行すればいいって書いてあったので、実行した後に再度npm run devを実行。

$ npm install autoprefixer@10.4.5 --save-exact
$ npm run dev
(省略)
  Child mini-css-extract-plugin /work/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!/work/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!/work/resources/css/app.css compiled successfully
webpack compiled successfully

Warningが消え、webpack compiled successfullyと最後に出ているので、解決!

参考にしたサイト

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2