search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.74k stars 26.86k forks source link

Postcss dependency of react-scripts needs an upgrade #10945

Closed nachogarciam closed 3 years ago

nachogarciam commented 3 years ago

Hi team

My build is not passing because I'm using npm audit to detect vulnerabilities. Npm audit detected a vulnerability with postcss which is a dependency of react-scripts. https://www.npmjs.com/advisories/1693

I tried to update the dependency with npm install postcss but it didn't work.

What can I do?

Example of a vulnerability:

image

hammerdr commented 3 years ago

I'm also deep into trying to fix this and haven't yet found the resolution.

PostCSS refuses to release a security fix (https://github.com/postcss/postcss/issues/1574), including declining to merge a PR to fix the security issue. postcss-preset-env is a little under water trying to upgrade to PostCSS 8 (https://github.com/csstools/postcss-preset-env/issues/191)

Trying to force a resolution gets me build errors.

hammerdr commented 3 years ago

This is not a recommendation, just saying how I'm working around this.

I forked the repository, applied the fix to the v7 branch, and created a release called v8.3.0 (from the v7 branch.. ugh) to get around the audit fix.

This is not verified, and not "safe", but because yarn audit doesn't have a way to ignore advisories I needed this as a way to get back to a green build.

Here is the release I created https://github.com/hammerdr/postcss/releases/tag/8.3.0

I then did

  1. yarn add url.to.tar.gz
  2. added "postcss": "url.to.tar.gz" to my resolutions in package.json

Will continue to watch this thread in case better solutions arise.

nachogarciam commented 3 years ago

Thank you for your quick response and for your work hammerdr. I’ll take a look.

Cheers!

kevlozano commented 3 years ago

I'm having the same issue. Upgrading or audit fix doesn't work.

sandeshindi commented 3 years ago

I m having the same issue. But workaround from hammerdr works. Any idea when they will be fixing the issue

Grachya commented 3 years ago

Have same issue. Waiting for fix.

hoffmannjan commented 3 years ago

Same here.

cinnamonbreakfast commented 3 years ago

Adding postcss to resolutions does not fix the issue either. Can't even compile by doing this. 😶

postcss-modules-values: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-modules-local-by-default: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
modules-extract-imports: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-modules-scope: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration        
postcss-import-parser: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration        
postcss-icss-parser: postcss.plugin was deprecated. Migration guide:  
https://evilmartians.com/chronicles/postcss-8-plugin-migration        
postcss-url-parser: postcss.plugin was deprecated. Migration guide:   
https://evilmartians.com/chronicles/postcss-8-plugin-migration        
postcss-flexbugs-fixes: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
autoprefixer: postcss.plugin was deprecated. Migration guide: 
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-attribute-case-insensitive: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
css-blank-pseudo: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration   
postcss-color-functional-notation: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-color-gray: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-color-hex-alpha: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-color-mod-function: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-color-rebeccapurple: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-custom-media: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-custom-properties: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-custom-selectors: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-dir-pseudo-class: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-double-position-gradients: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-env-fn: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-focus-visible: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-focus-within: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-font-variant: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-gap-properties: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
css-has-pseudo: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-image-set-function: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-initial: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-lab-function: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-logical-properties: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
TypeError: Cannot read property 'unprefixed' of undefined
mrrotberry commented 3 years ago

Same here.👆☹️

a-dabrowski-atb commented 3 years ago

Same here ;o

cemysf commented 3 years ago

same here

jerryhowe commented 3 years ago

my temporary solution to this is to explicitly set the npm audit threshold to high

npm audit --audit-level=high

Note: This does not really solve the root cause of the issue! It's simply to keep my CI/CD (Jenkins) happy until there is a proper fix to this!

mrrotberry commented 3 years ago

hmm, I will also offer my "temporary" solution for my CI/CD. 1) create npm script for audit in package.json "packages-audit": "yarn audit --groups dependencies"; 2) move "react-scripts": "^4.0.3", to devDependencies section.

What we have, audit for all packages using in production build with default audit level and working CI/CD.

I really hope that soon the CRA team will find solutions for migrating the postcss library.

sricks commented 3 years ago

For anyone else that wants to patch this just for audit issues, see package audit-ci. It allows you to bypass certain advisories while keeping your audit level low.

Unfortunately it doesn't seem fully compatible with npm 7 yet: https://github.com/IBM/audit-ci/issues/165

GD-Dheer commented 3 years ago

Also waiting for a fix on this. Thanks!

nicolasalarconrapela commented 3 years ago

If you want I can get into the task of fixing it but since I am new it will take me a little while and I do not promise anything ... In return you only have to assign it to me jejeje ... Waiting for an answer or/and advice 😇

BiancaArtola commented 3 years ago

Same issue here

osmarbento-AWS commented 3 years ago

Same issue here

rakestto commented 3 years ago

I solved the problem temporarily with this library https://www.npmjs.com/package/npm-force-resolutions and put postcss new version inside the resolutions key in package JSON.

Maybe isn't the best solution, I would like what do you think about it

jerryhowe commented 3 years ago

@rakestto I have already tried the force resolutions solution. However, I was unable to run npm build successfully after forcing the 8.2.10 dependency. Were you able to successfully build the project wit this? If so, how?

bholloway commented 3 years ago

With respect to resolve-url-loader there is bholloway/resolve-url-loader#198 relevant to this.

At least one user was successful with resolutions but I see from the comments above that might not work here.

Adopting postcss@8 in resolve-url-loader will force a major release (v5). There is an early alpha just published resolve-url-loader@next. The best way to help expedite this is to please try the alpha and upvote this comment 👍 .

rakestto commented 3 years ago

@rakestto I have already tried the force resolutions solution. However, I was unable to run npm build successfully after forcing the 8.2.10 dependency. Were you able to successfully build the project wit this? If so, how?

No, when I do a push my cypress tests fail on the GA. In my local machine it works perfect but in GA this solution make my tests fails.

jerryhowe commented 3 years ago

I suggest doing a fresh npm install (including deleting your node_modules first) on your local machine, then you will most likely get the same test errors in your local environment as well...

On Thu, 20 May 2021 at 14:52, Jose Fernando García Parreño < @.***> wrote:

@rakestto https://github.com/rakestto I have already tried the force resolutions solution. However, I was unable to run npm build successfully after forcing the 8.2.10 dependency. Were you able to successfully build the project wit this? If so, how?

No, when I do a push my cypress tests fail on the GA. In my local machine it works perfect but with this solution tests fails.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/10945#issuecomment-845087333, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABTWXORYCH7B4MVHAE5BDM3TOUAZDANCNFSM44SDC7XA .

rakestto commented 3 years ago

I suggest doing a fresh npm install (including deleting your node_modules first) on your local machine, then you will most likely get the same test errors in your local environment as well...

I've some libraries that uses react-scripts too and have the same vulnerabilities and I solved it with the npm-force-resolutions too. If I delete node_modules and package.json in my main app (which uses the libraries) and run npm install, the console throw me an error saying that it can't install the library.

I don't know if I need to put the npm-force-resolution in the peerDeps key in the library and put it in the dependencies key in the main app. However, I've tried a lot of ways in order to solve it and I couldn't.

I think that the best option is keep waiting to an update for react-scripts.

jerryhowe commented 3 years ago

@rakestto you shouldn't delete your package.json, because you will not be able to run any scripts that way. If you want, you can delete your package-lock.json, but then you will need to remove "preinstall": "npx npm-force-resolutions" from your package.json file, otherwise you will not be able to run npm install without errors. I hope this helped your situation! :)

rakestto commented 3 years ago

@rakestto you shouldn't delete your package.json, because you will not be able to run any scripts that way. If you want, you can delete your package-lock.json, but then you will need to remove "preinstall": "npx npm-force-resolutions" from your package.json file, otherwise you will not be able to run npm install without errors. I hope this helped your situation! :)

Sorry I wanted to say package-lock, thank you :) I'll try it

bijoth commented 3 years ago

same issue

Hekmundo commented 3 years ago

Same issue here, waiting for fix. Thanks!

EduardoLopes commented 3 years ago

Anyone can confirm that upgrading node to version 16 can fix this?

I was having the same problem and after i've upgraded the node version of the CI to 16, this npm audit warning stopped showing. It was using node 14, and i had some problems because of the package-lock file, since npm was upgraded from v6 to v7. To upgrade the package-lock properly, i did this:

cinnamonbreakfast commented 3 years ago

^ doesn't really work if you have npm-force-resolutions

PtrJsn commented 3 years ago

In lieu of acknowledgement on this issue from the team & seeing the growing list of folks interested in this issue, I did find it's on the maintainers' radar: iansu/create-react-app-meta#56

Not sure what the timing of the fix is. Also, more discussion under #9664.

smparadeza commented 3 years ago

Same issue with mine. npm-force-resolution is causing problems with npm run build. Hoping for a fix.

iamarunkumark commented 3 years ago

I am also facing this issue.

jerryhowe commented 3 years ago

my current temporary solution for this is to move create-react-app to devDependencies like this:

npm i create-react-app -D

and then make sure my CI jobs run npm audit with --production flag like this:

npm audit --production

hope this helps!

anna-gladushko-hapara commented 3 years ago

yes, I also switched to npm audit --production, it's a shame we have do it though

isopen commented 3 years ago

Similarly: Regular Expression Denial of Service - https://npmjs.com/advisories/1693

sricks commented 3 years ago

Really wishing that FB updates to postcss version 8, but there's now a backport to v7: https://github.com/postcss/postcss/issues/1574#issuecomment-859226586

So can we expect an update soon?

Gabe-MktShare commented 3 years ago

I used this from tailwind and it worked for me; install the Tailwind CSS v2.0 PostCSS 7 compatibility build: https://tailwindcss.com/docs/guides/create-react-app

PtrJsn commented 3 years ago

Update from a maintainer: https://github.com/facebook/create-react-app/issues/9664#issuecomment-864057989

PR #11121 just got merged. Sounds like the fix will be in 4.1, & should be soon.

robertwt7 commented 3 years ago

Hopefully we get the next release soon.. its been 4 months since the last release guys :(

Vite js has been moving much faster

duongdev commented 3 years ago

@robertwt7 yeah I prefer vite to CRA for new projects. CRA seems so dead 😅

PtrJsn commented 3 years ago

Thanks for the tips about Vite! I've been looking for a CRA replacement due to the support experience.

cmacdonnacha commented 3 years ago

Vite is still very new, not sure I'd be using it in production apps for another while. It also treats Vue as a first class citizen.

imprfekt commented 3 years ago

Waiting for the 4.1 https://github.com/facebook/create-react-app/issues/9664#issuecomment-864057989

gaearon commented 3 years ago

These warnings are false positives. There are no actual vulnerabilities affecting your app here.

To fix npm audit warnings, move react-scripts from dependencies to devDependencies in your package.json.

That will remove the false positive warnings.

I agree with the point in https://github.com/facebook/create-react-app/issues/11102 and will make this change so that new projects don't keep having these false positive warnings.

If you want to discuss this, please comment in https://github.com/facebook/create-react-app/issues/11102.