Module build failing - PostCSS plugin post-css-flexbugs-fixes requires PostCSS 8

Module build failing - PostCSS plugin post-css-flexbugs-fixes requires PostCSS 8

Running gatsby dev yields about 100 webpack errors, all related to my CSS files. Localhost:8000 displays a blank page. This is after I updated all of my dependencies by running npm outdated and installing each one @latest, as well as updating to Gatsby 3.0.0. following the migration guide.

Errors all look like this, but for each CSS module file I have:

ERROR in ./src/templates/tagsTemplate.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin postcss-flexbugs-fixes requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/Users/branoneusebio/Documents/Software Dev/charter-official/node_modules/postcss/lib/processor.es6:117:15)
    at new Processor (/Users/branoneusebio/Documents/Software Dev/charter-official/node_modules/postcss/lib/processor.es6:38:25)
    at postcss (/Users/branoneusebio/Documents/Software Dev/charter-official/node_modules/postcss/lib/postcss.es6:34:10)
    at Object.loader (/Users/branoneusebio/Documents/Software Dev/charter-official/node_modules/postcss-loader/dist/index.js:87:20)
    at processResult (/Users/branoneusebio/Documents/Software Dev/charter-official/node_modules/webpack/lib/NormalModule.js:598:19)
    at /Users/branoneusebio/Documents/Software Dev/charter-official/node_modules/webpack/lib/NormalModule.js:692:5
    at /Users/branoneusebio/Documents/Software Dev/charter-official/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/branoneusebio/Documents/Software Dev/charter-official/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/branoneusebio/Documents/Software Dev/charter-official/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/branoneusebio/Documents/Software Dev/charter-official/node_modules/postcss-loader/dist/index.js:96:7)
 @ ./src/templates/tagsTemplate.js 8:0-28
 @ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 171:11-173:5
 @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

Steps to reproduce

Running gatsby develop causes the error. It’s a production site and the repo is private but if needed I can try to make a new repo with same code as a reproducible copy.

Expected result

Running gatsby develop should build the site with no ESlint errors or anything.

Actual result

Running gatsby develop should throw about 91 webpack errors as seen above, with this message at the end: 91 ERRORS in child compilations (Use ‘stats.children: true’ resp. ‘–stats-children’ for more details) webpack compiled with 182 errors

Additionally, localhost:8000 will be a blank page vs. the entire site.

Environment

  System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.2 - /usr/local/bin/node
    npm: 7.6.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 88.0.4324.192
    Safari: 13.1
  npmPackages:
    gatsby: ^3.0.0 => 3.0.0
    gatsby-image: ^3.0.0 => 3.0.0
    gatsby-plugin-google-analytics: ^3.0.0 => 3.0.0
    gatsby-plugin-google-gtag: ^3.0.0 => 3.0.0
    gatsby-plugin-manifest: ^3.0.0 => 3.0.0
    gatsby-plugin-netlify: ^3.0.0 => 3.0.0
    gatsby-plugin-offline: ^4.0.0 => 4.0.0
    gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0
    gatsby-plugin-sharp: ^3.0.0 => 3.0.0
    gatsby-plugin-webfonts: ^1.1.4 => 1.1.4
    gatsby-source-filesystem: ^3.0.0 => 3.0.0
    gatsby-transformer-remark: ^3.0.0 => 3.0.0
    gatsby-transformer-sharp: ^3.0.0 => 3.0.0
  npmGlobalPackages:
    gatsby-cli: 3.0.0

[AbhyudayaSharma]

For NPM, installing postcss@latest fixed the issue. Thanks a lot @vladar !

[vladar]

@AbhyudayaSharma several dependencies in your project still require postcss7:

• stylelint (and its subdependencies)
• gatsby-transformer-remark -> sanitize-html
• gatsby -> css-minimizer-webpack-plugin -> cssnano
• gatsby-plugin-sass - >resolve-url-loader

I will double-check those in Gatsby dependency chain - we will upgrade those as soon as possible. In the meantime - you will likely have to add postcss 8 explicitly to your package.json OR use yarn resolutions and pin postcss to 8.2.6 (see this suggestion in the migration guide).