react-bootstrap autoprefixer warning

user_15138000 0
Viewed 7218

autoprefixer: Replace color-adjust to print-color-adjust. strong textThe color-adjust shorthand is currently deprecated. I'm using here react-bootstrap but when I run my code it show me some warning

Here is my compiled warning when I run react code

   Compiled with warnings.

   Warning
   (6:29521) autoprefixer: Replace color-adjust to print- 
   color-adjust. The color-adjust shorthand is currently 
   deprecated.

   Search for the keywords to learn more about each 
    warning.
    To ignore, add // eslint-disable-next-line to the line 
    before.

   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)
   Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
   Warning

   (6:29521) autoprefixer: Replace color-adjust to print-color-adjust. The color- 
   adjust 
   shorthand is currently deprecated.

    webpack compiled with 1 warning

My package.json file are:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
      "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.1.3",
     "react": "^18.1.0",
     "react-bootstrap": "^2.3.1",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
  "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
      "extends": [
          "react-app",
          "react-app/jest"
       ]
    },
   "browserslist": {
      "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
       ],
       "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
}
react-bootstrap reactjs
10 Answers

This is behaviour from Autoprefixer. I am not sure if this is a bug or feature, but I know that Autoprefixer 10.4.5 does not have this behaviour.

Add this in your package.json and run npm install:

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

(Disclaimer: this worked for me in Angular 13)

user_9140320

If you're using yarn add the following to package.json and run yarn:

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

And if you're using npm add the following to package.json and run npm install:

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

Once done, restart the application.

user_91469190

./node_modules/bootstrap/dist/css/bootstrap.min.css

Access on the link with cmd + click or crtl + click

And just change color-adjust to print-color-adjust (cmd + f or crtl f)

npm install && error was fixes

user_152972250

I had this issue and the solution that works for me was to run

npm install bootstrap@5.2.0-beta1

this version of bootstrap do the tricks! :D

user_109927600

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

  1. Add this to package.json:

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

  2. Delete package-lock.json

  3. Delete the node_modules/ directory

  4. Run npm install to install the npm modules back

user_53823180

That is Bootstrap issue. It's already fixed. The fix will appear in the next release.

user_2729270

If you change "react-scripts" version, warning won't occur. "react-scripts": "^4.0.1"

user_191066160

You can remove the package-lock.json/yarn.lock and install react-bootstrap as a global package.

yarn global add react-bootstrap

npm install react-bootstrap -g

Then just import the components from the package in the project.

user_191409590

In the first time the problem persists even adding this to package.json. Also to reinstall the node module, also cleaning the node_module folder. But after compiling my source code, all errors no longer show up.

  ...
    "overrides": {
        "autoprefixer": "10.4.5"
    },
    "resolutions": {
        "autoprefixer": "10.4.5"
    }
user_1894110

None of these answers work. Editing the ./node_modules content is most definitely bad idea as it will not persist during development phase. There has to be an external way to convert the words color-adjust=print-color-adjust in all instances. Maybe a postcss.config.js/tsx or something along that line of thought.

user_31714210
Related