ReactJs - Compiled with warning

You can add it into package.json

• First Step

  "resolutions": {
    "autoprefixer": "10.4.5"
  },
  

• Second Step

yarn install

** If you are using npm

• First Step

  "overrides": {
    "autoprefixer": "10.4.5"
  },
  

• Second Step

npm install

** Summarize from https://github.com/twbs/bootstrap/issues/36259#issuecomment-1114855186

Bump bootstrap to 5.2.0 or newer.

Bootstrap 5.1.3 still has this problem.

As I'm typing this, the latest bootstrap 5.2.0 version is 5.2.0-beta1, which given its beta status may or may not be something you want to upgrade to, but upgrading to that will at least solve this problem.

The root cause here is that bootstrap generates CSS with deprecated tags. Notice how your error message implicates bootstrap:

    WARNING in ./node_modules/bootstrap/dist/css/bootstrap.min.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.min.css)

This problem still exists for me even upgrading to bootstrap 5.2.0-beta1 and upon inspection of the installed bootstrap it appears to be using latest autoprefixer. I see no solution currently. If there is a way to create a js/tsx file to override that would be nice.

Simply setting overrides didn't work for me. I had do go through the following steps :

Add this to package.json:

"overrides": { "autoprefixer": "10.4.5" }

Delete package-lock.json

Delete the node_modules/ directory

Run npm install to install the npm modules back

1. Go to bootstrap.css or bootstrap.min.css, in my case is bootstrap.min.css
2. ctrl+F or find text -webkit-print-color-adjust:exact;color-adjust:exact
3. change the color-adjust to print-color-adjust
4. problem solved