Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin

I am getting this error whenever I run npm start. I tried a couple of fixes but none of them work for me. I tried to change the version of autoprefixer to 9.8.6 but it didn't work. Please help me with this issue

This is my package.json

{   "name": "reactgallery",   "version": "0.1.0",   "private": true,   "dependencies": {     "@testing-library/jest-dom": "^4.2.4",     "@testing-library/react": "^9.5.0",     "@testing-library/user-event": "^7.2.1",     "react": "^16.13.1",     "react-dom": "^16.13.1",     "react-scripts": "3.4.3"   },   "scripts": {     "start": "npm run watch:css && react-scripts start",     "build": "npm run build:css && react-scripts build",     "test": "react-scripts test",     "eject": "react-scripts eject",     "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",     "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"   },   "eslintConfig": {     "extends": "react-app"   },   "browserslist": {     "production": [       ">0.2%",       "not dead",       "not op_mini all"     ],     "development": [       "last 1 chrome version",       "last 1 firefox version",       "last 1 safari version"     ]   },   "devDependencies": {     "autoprefixer": "^9.8.6",     "postcss-cli": "^7.1.2",     "tailwindcss": "^1.8.10"   } } 
like image 305
r007 Avatar asked Sep 25 '20 02:09

r007


People also ask

What is PostCSS and Autoprefixer?

Autoprefixer: PostCSS plugin to parse CSS and add vendor prefixes to CSS rules. It is a CSS post processor. It combs through compiled CSS files to add or remove vendor prefixes like -webkit and -moz after checking the code; PostCSS: Transform CSS with JS plugins. PostCSS is a tool for transforming CSS with JS plugins.

What is PostCSS plugin?

PostCSS is a JavaScript tool that transforms your CSS code into an abstract syntax tree (AST) and then provides an API (application programming interface) for analyzing and modifying it using JavaScript plugins.

What is PostCSS import?

PostCSS plugin to transform @import rules by inlining content. This plugin can consume local files, node modules or web_modules. To resolve path of an @import rule, it can look into root directory (by default process.


1 Answers

Quick fix

Downgrade your autoprefixer to version 9, use

"autoprefixer": "^9.0.0"

in your dev dependencies.

More details

PostCSS was updated to version 8, however, PostCSS CLI has not yet been updated to handle PostCSS plugins which use the new PostCSS 8+ API. Autoprefixer uses the new PostCSS 8 API since version 10.

This is documented under known issues in the PostCSS GitHub page.

Once PostCSS CLI is updated to handle plugins that use the new PostCSS 8+ API, this will likely not be an issue. But until then, you may need to downgrade some PostCSS plugins to avoid errors.

like image 144
chyke007 Avatar answered Sep 16 '22 18:09

chyke007