1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) - laravel

Question

How can I solve this warning when creating laravel project?
1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
Steps to replicate:
composer create-project --prefer-dist laravel/laravel example
cd example
composer require laravel/ui
php artisan ui vue --auth
npm install vue#next vue-router#next vue-loader#next
npm install
npm run dev
EDIT
From this solution, add these lines to webpack.mix.js
mix.webpackConfig({
stats: {
children: true,
},
});
The above solution creates another warning:
WARNING in ./resources/sass/app.scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-6.use1!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/resolve-url-loader/index.js??clonedRuleSet-6.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[4]!./resources/sass/app.scss)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(2423:3) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
Child mini-css-extract-plugin C:\xampp\htdocs\lva\node_modules\css-loader\dist\cjs.js??clonedRuleSet-6.use1!C:\xampp\htdocs\lva\node_modules\postcss-loader\dist\cjs.js??clonedRuleSet-6.use[2]!C:\xampp\htdocs\lva\node_modules\resolve-url-loader\index.js??clonedRuleSet-6.use[3]!C:\xampp\htdocs\lva\node_modules\sass-loader\dist\cjs.js??clonedRuleSet-6.use[4]!C:\xampp\htdocs\lva\resources\sass\app.scss compiled with 1 warning
webpack compiled with 1 warning
How can I solve this?

Answer 1

The color-adjust shorthand is currently deprecated and it depends on the autoprefixer#10.4.6 (source).
I was able to fix this by reverting the autoprefixer package as well as #Benno to version 10.4.5. Run this:
npm install autoprefixer#10.4.5 --save-exact

Answer 2

You probably updated your npm packages. I was able to fix this by reverting the autoprefixer package to version 10.4.5 in the package-lock.json.

Answer 3

when you have problem with autoprefixer maybe because your version autoprefixer. you can add version autoprefixer based problem this version autoprefixer . i have problem on "print-color-adjust" and i add code on my package.json for change my autoprefixer become version "10.4.5"
when you use npm
"overrides": {
"autoprefixer": "10.4.5"
},
Or, when you use yarn
"resolutions": {
"autoprefixer": "10.4.5"
},
Don't forget to delete your package-lock and node_modules , then npm install again.
it work for me (react-bootstrap.v.5)

Answer 4

If you don't want to add additional packages to solve this error, then try this:
Capitalize all the files and Directory name in your components folder
Or you can run this command to install a package if the above solution doesn't work.
npm install autoprefixer#10.4.5 --save-exact
I'm using React with InertiaJS and Laravel as backend, this solution worked in my case.
Thanks

Answer 5

I have the same problem, whenever I hit save an annoying pop-up of error code comes. The simple solution is to add the following code to your webpack.mixjs file :
mix.webpackConfig({
stats: {
children: true,
},});
stop the npm run watch
add a package autoprefixer, add below in terminal:
npm install autoprefixer#10.4.5 --save-exact
run npm run watch and it will not give the error again.

Answer 6

I solved this issue within Laravel by changing the file ./node_modules/bootstrap/scss/forms/_form-check.scss
Line 28 part of the .form-check-input style
change color-adjust: exact; // Keep themed appearance for print
to print-color-adjust: exact; // Keep themed appearance for print