Error: Autoprefixer plugin PostCSS memerlukan PostCSS 8. Update PostCSS atau downgrade plugin ini

Question

Saya mendapatkan kesalahan ini setiap kali saya menjalankan npm start. Saya mencoba beberapa perbaikan tetapi tidak ada yang berhasil untuk saya. Saya mencoba mengubah versi autoprefixer menjadi 9.8.6 tetapi tidak berhasil. Tolong bantu saya dengan masalah ini

Ini adalah package.json saya

{
  "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

Perbaikan cepat

Downgrade autoprefixer Anda ke versi 9, gunakan

"autoprefixer": "^ 9.0.0"

dalam dependensi dev Anda.

Keterangan lebih lanjut

PostCSS telah diupdate ke versi 8, namun PostCSS CLI belum diupdate untuk menangani plugin PostCSS yang menggunakan PostCSS 8+ API baru. Autoprefixer menggunakan PostCSS 8 API baru sejak versi 10.

Ini didokumentasikan di bawah masalah yang diketahui di halaman GitHub PostCSS .

Setelah PostCSS CLI diupdate untuk menangani plugin yang menggunakan PostCSS 8+ API baru, kemungkinan ini tidak akan menjadi masalah. Tetapi sampai saat itu, Anda mungkin perlu menurunkan versi beberapa plugin PostCSS untuk menghindari kesalahan.

Answer 2

Saya tidak yakin tentang ini tetapi dapatkah Anda mencoba menginstal postcss sebagai ketergantungan?

npm i postcss

Answer 3

Jika Anda mengalami masalah ini dan Anda menggunakan Tailwind CSS v2, coba ini

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

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

Answer 4

Ok, bagi saya sudah diperbaiki menghapus package-lock.json dan menginstal:

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

Answer 5

kombo berikut berfungsi mulai Okt 2020

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

Answer 6

Berdasarkan tautan dokumentasi , berikan beberapa dukungan untuk NodeJS lama dan Anda harus memutakhirkan paket secara manual. Contoh dalam kasus saya untuk proyek berdasarkan webpack hanya perlu memperbarui dependensi tersebut:

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

Jadi Anda tidak perlu downgrade autoprefixer :)

Answer 7

Langkah-langkah ini berhasil untuk saya. Ini dari 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

Untuk Next.js 10 Anda hanya perlu melakukannya

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Sumber Masalah ini di sini

Answer 9

Saya mengalami masalah ini dengan Laravel-mix 5 dan PostCSS 8 dan Tailwind 2.
Dengan Laravel-mix 6 (beta saat ini), masalah ini telah terpecahkan.

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

Objek dan versi Dependecies dapat dimodifikasi secara langsung di package.jsonfile dan berfungsi