PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin. #5160

michaelpumo · 2020-09-18T18:39:01Z

🐛 bug report

Error when running dev or build with Parcel.

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc

{
  "presets": [
    "@babel/preset-env"
  ]
}

package.json

{
  "name": "jbg",
  "version": "1.0.0",
  "description": "",
  "main": "assets/js/app.js",
  "scripts": {
    "dev": "parcel watch assets/js/app.js --public-url /wp-content/themes/jbg/dist",
    "build": "parcel build assets/js/app.js --public-url /wp-content/themes/jbg/dist"
  },
  "author": "Michael Pumo",
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "autoprefixer": "^10.0.0",
    "eslint": "^7.9.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4",
    "parcel-bundler": "^1.12.4",
    "postcss-modules": "^3.2.2",
    "prettier": "^2.1.2",
    "sass": "^1.26.11"
  },
  "dependencies": {
    "lazysizes": "^5.2.2",
    "magic-grid": "^3.2.4"
  }
}

🤔 Expected Behavior

Project should build without errors.

😯 Current Behavior

Full error message:

> parcel watch assets/js/app.js --public-url /wp-content/themes/jbg/dist

🚨  /Users/michaelpumo/Documents/websites/jbg-wordpress/wp-content/themes/jbg/assets/scss/app.scss:undefined:undefined: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin.
    at Processor.normalize (/Users/michaelpumo/Documents/websites/jbg-wordpress/wp-content/themes/jbg/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/Users/michaelpumo/Documents/websites/jbg-wordpress/wp-content/themes/jbg/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/Users/michaelpumo/Documents/websites/jbg-wordpress/wp-content/themes/jbg/node_modules/postcss/lib/postcss.js:55:10)
    at module.exports (/Users/michaelpumo/Documents/websites/jbg-wordpress/wp-content/themes/jbg/node_modules/parcel-bundler/src/transforms/postcss.js:17:19)

💁 Possible Solution

Downgrade Autoprefixer to:
"autoprefixer": "^9.8.6"

🔦 Context

Project was building successfully until after updating autoprefixer package.

💻 Code Sample

N/A

🌍 Your Environment

Software	Version(s)
Parcel	^1.12.4
Node	v10.7.0
npm/Yarn	6.14.8
Operating System	macOS Catalina v 10.15.6

The text was updated successfully, but these errors were encountered:

Sam10F · 2020-09-19T12:44:34Z

The "Possible Solution" worked for me.
Waiting for a definitive solution...

josef256 · 2020-09-19T18:04:01Z

i have the same issue downgrading the version to 9.8.6 fixed it

johnwmartinez · 2020-09-20T06:30:23Z

The possible solution worked for me too.

codemaster138 · 2020-09-21T19:08:56Z

Your possible solution isn't working for me...

codemaster138 · 2020-09-21T19:10:40Z

Nevermind working now

Alecto · 2020-09-23T06:07:34Z

the same error

IanLin09 · 2020-09-23T09:57:11Z

same error and possible solution isn't working for me either

9mm · 2020-09-24T00:45:01Z

Same problem except I'm using "postcss-cli": "^8.0.0", as well

adithwip · 2020-09-24T02:34:53Z

The Possible Solution also worked for me.
Glad I am not the only one.

marklai1998 · 2020-09-24T10:20:38Z

mine problem is with postcss-loader 4.0, which removed postcss from dependency
install postcss separately will to the job
https://github.com/webpack-contrib/postcss-loader/blob/master/CHANGELOG.md

your problem should be with postcss-modules which postcss is only v7
you need to wait for it to upgrade
https://github.com/css-modules/postcss-modules/blob/master/package.json

mischnic · 2020-09-24T11:56:22Z

you need to wait for it to upgrade

PostCSS 8 is backwards compatible with version 7: #5152 (comment)

marklai1998 · 2020-09-24T17:24:15Z

you need to wait for it to upgrade

PostCSS 8 is backwards compatible with version 7: #5152 (comment)

autoprefixer doesn't

devongovett · 2020-09-24T17:28:02Z

This isn't a Parcel issue right? We don't have autoprefixer as a dependency...

Vassi · 2020-09-24T18:54:18Z

I mean, Parcel added post-css and whatnot, all I did (as per the documentation) was add a postcssrc like this:

{
  plugins: {
    'autoprefixer': {}
  }
}

Even though postcss was added @ 8.0.9 (by parcel I assume) I still get this error so something is off?

mischnic · 2020-09-24T19:03:02Z

The point is that if you use autoprefixer, you need to install explicitly it yourself, meaning you also control the version of autoprefixer which needs to be at downgrades as per Possible Solution.

ai · 2020-09-29T00:37:08Z

@devongovett Parcel needs to update PostCSS to be able to use PostCSS 8 plugins

krishnaUIDev · 2020-10-09T04:40:48Z

downgrade autoprefixer to 9.8.6. Then it should work fine.

ai · 2020-10-09T04:43:37Z

Another option is a migration to Parcel 2, which use PostCSS 8

emshano · 2020-10-10T01:08:09Z

Cheers, downgrading it works

williamroger · 2020-10-22T15:54:46Z

The Possible Solution worked for me too.
Thanks!

HuangHongRui · 2020-11-05T09:10:14Z

Emmmm...
Install postcss -D
Done.

dirad · 2020-11-22T09:32:27Z

Emmmm...

Install postcss -D

Done.

👍

why does this work?

LukeTOBrien · 2020-11-29T16:55:16Z

Hi,

I just came across this error today, I'm not sure if it was bundle-text:... or a dependancy I am using in my project.
Your suggested solution worked for me but I don't know why.

ProLoser · 2020-12-17T07:59:33Z

Emmmm...

Install postcss -D

Done.

👍

why does this work?

It works because it's doing the same thing as explicitly installing an older version of autoprefixer it's explicitly installing a different version than the one that would be implicitly installed from a sub-dependency.

Explicitly pinning autoprefixer keeps it with older but known-to-be-compatible version, while your implementation forces the resolved postcss version to be newer.

I don't really know which solution is better, they will yield similar results (aside from other incompatibilities you may encounter)

getspooky · 2020-12-21T16:17:32Z

Hi,
Downgrade your autoprefixer to version 9, use

 "autoprefixer": "9.0.0",

trapcodeio · 2020-12-28T06:59:01Z

I have this error when trying to build PostCSS plugin postcss-purgecss requires PostCSS 8

I have do all the fix found on tailwind website.. all to no avail

DeMoorJasper · 2020-12-28T13:59:05Z

Not sure why this issue is still open?

There have been multiple suggested and valid solutions to this problem:

Use a version of the plugin that is postcss 7 compatible
Update to the latest Parcel 2 nightly

simonwiles · 2020-12-30T05:14:59Z

The latest Parcel 2 nightly doesn't seem to be pulling in PostCSS8 here. What am I missing?

$ yarn add -D parcel@nightly postcss-cli
...
warning " > [email protected]" has unmet peer dependency "postcss@^8.0.0".
...

$ yarn run postcss
...
Please install PostCSS 8 or above
error Command failed with exit code 1.

$ yarn why postcss
[1/4] Why do we have the module "postcss"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
...

DeMoorJasper · 2020-12-30T09:05:27Z

@simonwiles You probably already had it installed, install postcss 8 manually and it should work

simonwiles · 2020-12-30T17:23:39Z

@DeMoorJasper -- sorry, I should have made it clearer; this is in a completely new project, e.g.

$ mkdir new-project && cd new-project
$ yarn add -D parcel@nightly postcss-cli
...
warning " > [email protected]" has unmet peer dependency "postcss@^8.0.0".
...

$ yarn run postcss
...
Please install PostCSS 8 or above
error Command failed with exit code 1.

$ yarn why postcss
[1/4] Why do we have the module "postcss"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
...

Installing PostCSS 8 manually does allow postcss-cli to work, but Parcel 2 still appears to be using [email protected] (I arrived at this issue trying to debug a problem whereby the postcss-image-inliner plugin works just fine through postcss-cli but doesn't work through Parcel 2, despite identical config -- but I should probably open a separate issue for that with a clean reproducible case).

DeMoorJasper · 2020-12-30T17:25:58Z

@simonwiles Seems strange, if you could create a full example project where this happens preferably in a separate issue that would really help us to debug this.

ai · 2020-12-30T17:28:15Z

@simonwiles do you use latest Parcel 2 nightly? next and beta channels still doesn’t support PostCSS 8.

simonwiles · 2020-12-30T17:45:36Z

Yeah, I've been making sure to use nightly. I'm not sure whether my specific problem with postcss-image-inliner is related to PostCSS 7 vs. 8 or not, tbh, but I wound up here looking for hints. Just doing yarn add -D parcel@nightly postcss-cli in an empty folder results in the output reported above, though, on both the systems I have immediately to hand at least.

I do want to solve the postcss-image-inliner problem though, so I'll open a new issue with a reproducible example (if I don't resolve the problem in the process, as sometimes happens ;) ).

simonwiles · 2020-12-30T21:40:18Z

Issue filed: #5551 Thanks :)

It requires postcss 8 but Parcel still uses an older one. parcel-bundler/parcel#5160

Canuckaholic · 2021-03-01T21:38:49Z

The following worked for me. Note that I also needed to downgrade the version of postcss-modules from 4.0.0 to 3.2.2.

"autoprefixer": "^9.8.6",
"parcel-bundler": "^1.12.4",
"postcss-modules": "^3.2.2",

ulises-castro · 2021-03-13T18:42:40Z

In my case I was trying running a gatsby project, so I had that issue.

The solution was downgrading postcss-pxtorem:
npm install [email protected]

https://stackoverflow.com/questions/64057023/error-postcss-plugin-autoprefixer-requires-postcss-8-update-postcss-or-downgra parcel-bundler/parcel#5160

chrisSbarrett · 2021-04-29T16:31:13Z

I still get this issue even on parcel@next. 👎

devopg · 2021-08-19T11:03:40Z

any news ?
"autoprefixer": "^10.3.1",
"postcss": "^8.3.6",

Error: PostCSS plugin autoprefixer requires PostCSS 8.

meant to avoid: ```sh ... Error: PostCSS plugin autoprefixer requires PostCSS 8. ... ``` redwoodjs#3515 (comment) parcel-bundler/parcel#5160

fix: pin `autoprefixer` meant to avoid: ```sh ... Error: PostCSS plugin autoprefixer requires PostCSS 8. ... ``` redwoodjs#3515 (comment) parcel-bundler/parcel#5160 chore: test using `yarn`'s `resolutions` see: https://stackoverflow.com/a/66825007

mostlyobvious mentioned this issue Dec 29, 2020

Migrate to browser and site to Tailwind 2.0 RailsEventStore/rails_event_store#924

Closed

DeMoorJasper closed this as completed Dec 30, 2020

jtojnar added a commit to fossar/selfoss that referenced this issue Jan 8, 2021

client: Downgrade autoprefixer

f7dfacf

It requires postcss 8 but Parcel still uses an older one. parcel-bundler/parcel#5160

zhx828 pushed a commit to oncokb/oncokb-transcript that referenced this issue Apr 17, 2021

Downgrade autoprefixer to fix PostCSS issue

2d97f2f

https://stackoverflow.com/questions/64057023/error-postcss-plugin-autoprefixer-requires-postcss-8-update-postcss-or-downgra parcel-bundler/parcel#5160

virtuoushub mentioned this issue Dec 25, 2021

Add storybook ci option to test that Storybook starts "ok" redwoodjs/redwood#3515

Merged

virtuoushub added a commit to virtuoushub/redwood that referenced this issue Feb 25, 2022

fix: downgrade autoprefixer

9ba1335

meant to avoid: ```sh ... Error: PostCSS plugin autoprefixer requires PostCSS 8. ... ``` redwoodjs#3515 (comment) parcel-bundler/parcel#5160

virtuoushub added a commit to virtuoushub/redwood that referenced this issue Feb 25, 2022

fix: downgrade autoprefixer

5e49723

meant to avoid: ```sh ... Error: PostCSS plugin autoprefixer requires PostCSS 8. ... ``` redwoodjs#3515 (comment) parcel-bundler/parcel#5160

virtuoushub added a commit to virtuoushub/redwood that referenced this issue Feb 25, 2022

fix: downgrade autoprefixer

86fded2

meant to avoid: ```sh ... Error: PostCSS plugin autoprefixer requires PostCSS 8. ... ``` redwoodjs#3515 (comment) parcel-bundler/parcel#5160

PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin. #5160

PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin. #5160

Comments

michaelpumo commented Sep 18, 2020 • edited Loading

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

Sam10F commented Sep 19, 2020 • edited Loading

josef256 commented Sep 19, 2020

johnwmartinez commented Sep 20, 2020

codemaster138 commented Sep 21, 2020

codemaster138 commented Sep 21, 2020

Alecto commented Sep 23, 2020

IanLin09 commented Sep 23, 2020

9mm commented Sep 24, 2020

adithwip commented Sep 24, 2020

marklai1998 commented Sep 24, 2020 • edited Loading

mischnic commented Sep 24, 2020

marklai1998 commented Sep 24, 2020

devongovett commented Sep 24, 2020

Vassi commented Sep 24, 2020 • edited Loading

mischnic commented Sep 24, 2020

ai commented Sep 29, 2020

krishnaUIDev commented Oct 9, 2020

ai commented Oct 9, 2020

emshano commented Oct 10, 2020

williamroger commented Oct 22, 2020

HuangHongRui commented Nov 5, 2020

dirad commented Nov 22, 2020 • edited Loading

LukeTOBrien commented Nov 29, 2020

ProLoser commented Dec 17, 2020

getspooky commented Dec 21, 2020

trapcodeio commented Dec 28, 2020

DeMoorJasper commented Dec 28, 2020

simonwiles commented Dec 30, 2020

DeMoorJasper commented Dec 30, 2020

simonwiles commented Dec 30, 2020

DeMoorJasper commented Dec 30, 2020

ai commented Dec 30, 2020

simonwiles commented Dec 30, 2020

simonwiles commented Dec 30, 2020

Canuckaholic commented Mar 1, 2021

ulises-castro commented Mar 13, 2021

chrisSbarrett commented Apr 29, 2021

devopg commented Aug 19, 2021

michaelpumo commented Sep 18, 2020 •

edited

Loading

Sam10F commented Sep 19, 2020 •

edited

Loading

marklai1998 commented Sep 24, 2020 •

edited

Loading

Vassi commented Sep 24, 2020 •

edited

Loading

dirad commented Nov 22, 2020 •

edited

Loading