最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Application doesn't run after updating PostCSS to version 8 React - Stack Overflow

programmeradmin3浏览0评论

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            

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:

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

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./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./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
Share Improve this question asked May 16, 2021 at 12:35 Tomas BarreiroTomas Barreiro 3051 gold badge4 silver badges11 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 5

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

For me what causing the problem was the postcss-rtl which has an older version of postcss. I used npm ls postcss to see from where it es an older version of postcss. The solution was to replace postcss-rtl with postcss-rtlcss.

I added the following in resolutions in my package.json. The vulnerability and the error was gone. (These were the stable and latest versions)

"postcss": "^8.4.8",
"postcss-preset-env": "^8.4.1"
发布评论

评论列表(0)

  1. 暂无评论