76

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:

  1. composer create-project --prefer-dist laravel/laravel example
  2. cd example
  3. composer require laravel/ui
  4. php artisan ui vue --auth
  5. npm install vue@next vue-router@next vue-loader@next
  6. npm install
  7. 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?

Paulo Boaventura
  • 1,365
  • 1
  • 9
  • 29
rhemmuuu
  • 1,147
  • 2
  • 5
  • 19

6 Answers6

154

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
Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
enrollment
  • 1,589
  • 1
  • 4
  • 8
  • 1
    You're the hero. I love this answer. help my issue. – Khay Leng May 04 '22 at 13:58
  • 3
    I had the warning on autoprefixer 10.4.2, but just upgrading to the latest fixed it for me. I don't see anything in the release notes though – Adam May 06 '22 at 08:30
  • 2
    I had notifications/errors with Laravel 9.11 and Jetstream (Tailwind / Livewire), with "npm install autoprefixer@10.4.5 --save-exact" I have no more errors. Thx ! – JCH77 May 06 '22 at 15:11
  • 1
    Worked for me too without needing to add the stats children above.. super thanks! :) – DCX May 07 '22 at 19:07
  • For further readers, the problem was fixed in Bootstrap 5.2, You can install it (beta) via `npm install bootstrap@next-5`, or wait for the official version to land. Source: https://github.com/twbs/bootstrap/issues/36259#issuecomment-1143073964 – AgainPsychoX Jun 21 '22 at 12:44
  • This didn't work for me – Fernando Torres Aug 22 '22 at 01:32
  • @FernandoTorres were you creating a fresh project with the lasted version of laravel? – enrollment Aug 26 '22 at 11:59
  • > its currently deprecated Does it mean it will be undeprecated soon? Or do we need to change color-adjustment shorthand somewere? – Adam Aug 29 '22 at 16:37
7

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.

Benno Meyer
  • 73
  • 3
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)

Anjasmara Dwi.S
  • 303
  • 1
  • 8
3

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.

Taher Badshah
  • 41
  • 3
2

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

Tayyab Hayat
  • 815
  • 1
  • 9
  • 22
0

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

Pete Montgomery
  • 1