Error: el autoprefixer del complemento PostCSS requiere PostCSS 8. Actualice PostCSS o degrade este complemento

Question

Recibo este error cada vez que ejecuto npm start. Probé un par de soluciones, pero ninguna me funcionó. Intenté cambiar la versión de autoprefixer a 9.8.6 pero no funcionó. por favor ayudame con este problema

Este es mi 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

Arreglo rapido

Cambie su autoprefixer a la versión 9, use

"autoprefixer": "^ 9.0.0"

en sus dependencias de desarrollo.

Más detalles

PostCSS se actualizó a la versión 8, sin embargo, la CLI de PostCSS aún no se ha actualizado para manejar los complementos de PostCSS que usan la nueva API de PostCSS 8+. Autoprefixer utiliza la nueva API PostCSS 8 desde la versión 10.

Esto se documenta en problemas conocidos en la página de GitHub de PostCSS .

Una vez que la CLI de PostCSS se actualice para manejar los complementos que usan la nueva API de PostCSS 8+, es probable que esto no sea un problema. Pero hasta entonces, es posible que deba degradar algunos complementos de PostCSS para evitar errores.

Answer 2

No estoy seguro de esto, pero ¿puedes intentar instalar postcss como una dependencia?

npm i postcss

Answer 3

Si tiene este problema y está utilizando Tailwind CSS v2, intente esto

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

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

Answer 4

Ok, para mí se corrigió la eliminación de package-lock.json y la instalación:

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

Answer 5

el siguiente combo funciona a partir de octubre de 2020

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

Answer 6

Según el enlace de documentación, se eliminan algunos soportes para NodeJS antiguo y debe actualizar manualmente los paquetes. Ejemplo en mi caso para un proyecto basado en paquete web solo necesita actualizar esas dependencias:

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

Por lo tanto, no es necesario degradar el prefijo automático :)

Answer 7

Estos pasos funcionaron para mí. Esto fue de 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

Para Next.js 10 solo tienes que hacer

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Fuente Este problema aquí

Answer 9

Tuve este problema con Laravel-mix 5 y PostCSS 8 y Tailwind 2.
Con Laravel-mix 6 (beta en este momento) esto se resolvió.

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",
},

El objeto y la versión de las dependencias se pueden modificar directamente en el package.jsonarchivo y funciona