Fehler: Für den Autoprefixer des PostCSS-Plugins ist PostCSS 8 erforderlich. Aktualisieren Sie PostCSS oder führen Sie ein Downgrade dieses Plugins durch

Question

Ich erhalte diesen Fehler, wenn ich npm start starte. Ich habe ein paar Korrekturen versucht, aber keine davon funktioniert für mich. Ich habe versucht, die Version von Autoprefixer auf 9.8.6 zu ändern, aber es hat nicht funktioniert. Bitte helfen Sie mir bei diesem Problem

Das ist meine 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"
  }
}

Answer 1

Schnelle Lösung

Verwenden Sie ein Downgrade Ihres Autoprefixers auf Version 9

"Autoprefixer": "^ 9.0.0"

in Ihren Entwicklungsabhängigkeiten.

Mehr Details

PostCSS wurde auf Version 8 aktualisiert. Die PostCSS-CLI wurde jedoch noch nicht für PostCSS-Plugins aktualisiert, die die neue PostCSS 8+ -API verwenden. Autoprefixer verwendet die neue PostCSS 8-API seit Version 10.

Dies wird unter bekannten Problemen auf der PostCSS GitHub-Seite dokumentiert .

Sobald die PostCSS-CLI aktualisiert wurde, um Plugins zu verarbeiten, die die neue PostCSS 8+ -API verwenden, ist dies wahrscheinlich kein Problem mehr. Bis dahin müssen Sie möglicherweise einige PostCSS-Plugins herunterstufen, um Fehler zu vermeiden.

Answer 2

Ich bin mir nicht sicher, aber können Sie versuchen, postcss als Abhängigkeit zu installieren?

npm i postcss

Answer 3

Wenn Sie dieses Problem haben und Tailwind CSS v2 verwenden, versuchen Sie dies

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Quelle: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

Answer 4

Ok, für mich wurde das Entfernen von package-lock.json und das Installieren behoben :

"tailwindcss": "^1.8.10"
"postcss-cli": "^7.1.0"
"autoprefixer": "^9.7.5"

Answer 5

Die folgende Kombination funktioniert ab Oktober 2020

  ...
  "dependencies": {
    "autoprefixer": "^9.8.6",
    "postcss-cli": "^8.1.0",
    "tailwindcss": "^1.9.2"
  }

Answer 6

Basierend auf dem Dokumentationslink wird die Unterstützung für alte NodeJS eingestellt und Sie müssen die Pakete manuell aktualisieren. Beispiel in meinem Fall für ein Projekt, das auf Webpack basiert, müssen nur diese Abhängigkeiten aktualisiert werden:

  "dependencies": {
    "autoprefixer": "^10.0.2",
    "postcss": "^8.1.7",
    "postcss-loader": "^4.0.4"
  }

Sie müssen den Autoprefixer also nicht herunterstufen :)

Answer 7

Diese Schritte haben bei mir funktioniert. Dies war von Github

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Answer 8

Für Next.js 10 müssen Sie nur noch tun

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Quelle Dieses Problem hier

Answer 9

Ich hatte dieses Problem mit Laravel-Mix 5 und PostCSS 8 und Tailwind 2.
Mit Laravel-Mix 6 (Beta im Moment) wurde dies gelöst.

npm install laravel-mix@next --save-dev

Answer 10

"dependencies": {
    "autoprefixer": "^9.8.6",
    "postcss": "^8.0.0",
    "postcss-cli": "^8.1.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
},

Das Abhängigkeitsobjekt und die Version können direkt in der package.jsonDatei geändert werden und funktionieren