[v2.0.0-alpha.71] Error: PostCSS plugin autoprefixer requires PostCSS 8.

[dcousineau-godaddy]

🐛 Bug Report

I upgraded our internal documentation site to v2.0.0-alpha.71 (from alpha.69) and started receiving several errors along the lines of:

./node_modules/@docusaurus/core/lib/client/nprogress.css
Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
 @ ./node_modules/@docusaurus/core/lib/client/PendingNavigation.js 6:261-285
 @ ./node_modules/@docusaurus/core/lib/client/App.js
 @ ./node_modules/@docusaurus/core/lib/client/clientEntry.js
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@docusaurus/core/lib/client/clientEntry.js./node_modules/@docusaurus/core/lib/client/baseUrlIssueBanner/styles.module.css
...

I believe it's related to the upgrade to autoprefixer@10 from #4355 (as autoprefixer@10 requires postcss 8). Checking my package-lock.json's (I run a similar monorepo to this official docusaurus monorepo) @docusaurus/core correctly pulls in autoprefixer@10 and postcss@8. However it looks like @docusaurus/cssnano-preset and @docusaurus/theme-classic all want postcss@7

I think the solution is to coordinate the postcss upgrades across the other packages e.g. https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-cssnano-preset/package.json#L17

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

I believe part of my issue is I'm using npm and not yarn, so it might be possible to reproduce by setting up a Docusaurus website using npm. I don't have time right now to build a reproduction use case.

Expected behavior

Clean build.

Actual Behavior

Build errors.

Your Environment

• Public source code: n/a
• Public site url: n/a
• Docusaurus version used: 2.0.0-alpha.71
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): node 12.18.2, npm 6.14.11, lerna 3.22.1
• Operating system and version (desktop or mobile): macOS 11.2.3

Reproducible Demo

n/a, see above "To Reproduce"

[lukewhyte]

Same issue here on upgrading from 2.0.0-alpha.70 to 2.0.0-alpha.71 this morning.

[slorber]

Thanks for reporting, make sense.

Also using npm @lukewhyte ?

[lukewhyte]

@slorber Yep, with npm

[dcousineau-godaddy]

One note that is mostly unrelated, I was chasing down some other issues with Theme component resolutions (the live codeblock wasn't correctly taking over) and it turns out the solution ended up being for me to use lerna hoisting, so I think it's possible Yarn workspaces are hiding some interactions and behaviors.

[slorber]

the problem looks a bit similar to #3515

Was wondering if any of you had a public repo so that we can at. least reproduce this somewhere? Apparently, this does not happen on newly initialized apps so it's hard for us to do anything without a repro.

@dcousineau-godaddy you are using lerna but npm6 which does not support workspaces?

[hugo-vrijswijk]

@slorber I am also running into this. But weirdly not on alpha.71, but when upgrading to alpha.72. The repo is publicly available here: stryker-mutator/stryker-mutator.github.io#251. Npm and no Lerna.

It looks like @docusaurus/cssnano-preset has a dependency on postcss ^7.0.2 while @docusaurus/core has a postcss dependency of ^8.2.7

[Sleaf]

upgrade docusaurus-plugin-sass to 0.1.12 works to me

[dcousineau-godaddy]

@slorber sorry I missed the notification (I need to turn on my github notifications for this account)

Correct, this is npm@6 without npm workspaces. For your background, npm@7 workspaces aren't quite fully baked and we have issues even using the workspaces directly. As far as I've been informed by friends close to the situation npm workspaces are a ... first pass and public beta and not quite ready for yarn workspaces level workloads?

I don't have a public repo, but I can see if I can make a replication.

[pjchender]

As @Sleaf mentioned, I upgrade docusaurus-plugin-sass to 0.1.12. After removing node_modules and package-lock.json and run npm install, it works for me.

[miku86]

I don't use docusaurus-plugin-sass in my project and got the same error.
I solved it by just deleting package-lock.json and node_modules.

[slorber]

Closing as aloha 75 is using postcss 8