将 PostCSS 更新到 React 版本 8 后应用程序无法运行

Question

当我在我的应用程序中工作时，我注意到我有 80 个漏洞，主要是因为同行版本，比如一个要求 React 16.8.0，而我有 17.0.1 之类的东西，但另一个说：

  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     

所以我搜索并更新了所有内容。现在我有 0 个漏洞，但我的应用程序无法运行，所以看起来无论如何它都没有漏洞。当我运行它时，它向我显示了很多像这样的消息（它只更改了在本例中显示“pseudo-class-any”的部分）：

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

然后它说：

./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

问题是许多库（例如react-scripts）尚未从PostCSS 7更新到PostCSS 8。

出于同样的原因，我还强制更新了一些依赖项，并且在 React 构建过程中看到了以下消息：

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

相同的消息还提到了以下所有内容，并引用了迁移指南：

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

然后我收到一个错误（几乎与操作相同），涉及 Bootstrap 和 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

许多包都包含 PostCSS 作为依赖项。

查看有关使用 PostCSS 8.0 更新插件的文档，似乎等待项目中的包更新到 PostCSS 8.0 API，或者根据 PostCSS 8.0 更新文档手动分叉和编辑它们，可能是某些项目的唯一选择。

比这更好的答案将不胜感激。