Application doesn't run after updating PostCSS to version 8 React

Question

I was working in my app when I noticed I had 80 vulnerabilities, mainly because of peer versions, like one asked for react 16.8.0 and I had 17.0.1 and stuff like that, but another one said:

  Moderate        Regular Expression Denial of Service                          

  Package         postcss                                                       

  Patched in      >=8.2.10                                                      

  Dependency of   react-scripts                                                 

  Path            react-scripts > postcss-preset-env >                          
                  postcss-replace-overflow-wrap > postcss                       

  More info       https://npmjs.com/advisories/1693     

So I searched and I updated everything. Now I have 0 vulnerabilities but my application doesn't run so it looks like it has no vulnerabilities anyway. When I run it, it shows me a lot of messages like this one (it only changes the part where in this case it says 'pseudo-class-any'):

postcss-pseudo-class-any-link: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration

and then it says:

./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css)
TypeError: Cannot read property 'unprefixed' of undefined

Answer 1

The issue is that many libraries such as react-scripts, have not updated from PostCSS 7 to PostCSS 8.

I also did a forced update of some of my dependencies for the same reasons, and during the React build, saw this message:

Post-css-modules-values: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration

Identical messages mentioned all of the following as well, referencing the migration guide:

postcss-modules-local-by-default, modules-extract-imports, postcss-modules-scope, postcss-import-parser, postcss-icss-parser, postcss-url-parser, postcss-flexbugs-fixes, autoprefixer, postcss-ttribute-case-insensitive, css-blank-pseudo, postcss-color-functional-notation, postcss-color-gray, postcss-color-hex-alpha, postcss-color-mod-function, postcss-color-rebeccapurple, postcss-custom-media,
postcss-custom-properties, postcss-custom-selectors, postcss-dir-pseudo-class, postcss-double-position-gradients, postcss-env-fn, postcss-focus-visible, postcss-focus-within, postcss-font-variant, postcss-gap-properties, css-has-pseudo, postcss-image-set-function

Then I got an error (almost identical to the op's), involving Bootstrap and PostCSS:

./node_modules/bootstrap/dist/css/bootstrap.min.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./node_modules/bootstrap/dist/css/bootstrap.min.css)

TypeError: Cannot read property 'unprefixed' of undefined

Many packages include PostCSS as a dependency.

Looking at the docs about updating plugins for using PostCSS 8.0 it seems that waiting until packages in our projects update to the PostCSS 8.0 API, or manually forking and editing them per PostCSS's 8.0 update documentation, may be the only options for some projects.

A better answer than this would be appreciated.