How to resolve 5 high severity vulnerabilities in npm audit report for glob-parent, chokidar, watchpack-chokidar2, and webpack? - npm

I have Laravel, Inertia, Vue 3 stack project. And when i run npm install there is have 5 high severity vulnerabilities. And i run npm audit, then the error is:
# npm audit report
glob-parent <5.1.2
Severity: high
glob-parent before 5.1.2 vulnerable to Regular Expression Denial of Service in enclosure regex - https://github.com/advisories/GHSA-ww39-953v-wcq6
fix available via `npm audit fix`
node_modules/watchpack-chokidar2/node_modules/glob-parent
chokidar 1.0.0-rc1 - 2.1.8
Depends on vulnerable versions of glob-parent
node_modules/watchpack-chokidar2/node_modules/chokidar
watchpack-chokidar2 *
Depends on vulnerable versions of chokidar
node_modules/watchpack-chokidar2
watchpack 1.7.2 - 1.7.5
Depends on vulnerable versions of watchpack-chokidar2
node_modules/vue-share-buttons/node_modules/watchpack
webpack 4.44.0 - 4.46.0
Depends on vulnerable versions of watchpack
node_modules/vue-share-buttons/node_modules/webpack
5 high severity vulnerabilities
To address all issues, run:
npm audit fix
I want to fix this message, although this error not affected by to my project, and my project still working normally. I have already run npm audit fix again, but its still return same error.
My package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.25",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vue-loader": "^16.8.3"
},
"dependencies": {
"#inertiajs/vue3": "^1.0.0",
"#tabler/icons-vue": "^2.1.2",
"#tinymce/tinymce-vue": "^4.0.7",
"#vueform/multiselect": "^2.5.1",
"maska": "^1.5.0",
"moment": "^2.29.4",
"sass": "^1.55.0",
"vue": "^3.2.29",
"vue-chart-3": "^3.1.2",
"vue-easy-lightbox": "^1.8.2",
"vue-meta": "^3.0.0-alpha.10",
"vue-recaptcha": "^2.0.3",
"vue-share-buttons": "^1.0.4",
"vue-sweetalert2": "^5.0.2",
"vue3-carousel": "^0.1.40"
}
}

Related

Laravel's React Breeze ,Always can't run : npm run dev

The Vite doesn't work
Os:CentOs7
Laravel: 9.26.1
node: v16.17.0
npm: 8.15.0
I would like use new Laravel Project with React.js.
And try the plug-in Breeze for Authentication
I use the command
composer create-project laravel/laravel new-project
php artisan breeze:install
php artisan breeze:install react
npm install
npm run dev
At first all command successful complete , but when i use
npm run dev
the server told me
/tmp/dev-xxxxxx.sh: line 1: vite: command not found
and i try the solution
https://github.com/vitejs/vite/discussions/5432
and
https://github.com/vitejs/vite/issues/1215
that's all not work for me
this is package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"#headlessui/react": "^1.4.2",
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-react": "^0.8.0",
"#inertiajs/progress": "^0.2.6",
"#tailwindcss/forms": "^0.5.2",
"#vitejs/plugin-react": "^2.0.0",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2",
"axios": "^0.27",
"laravel-vite-plugin": "^0.5.0",
"lodash": "^4.17.19",
"postcss": "^8.4.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tailwindcss": "^3.1.0"
},
"dependencies": {
"vite": "^3.0.9"
}
}
How should I do to resolve this question?
I find the question
i type before npm install
npm config set bin-links false
because CentOs7 have sym link error(bin-link to my laptop)
that can not install complete
so i should set bin-links to true
and
npm install vite
it's would solve the problem

Multiple vulnerabilities in new CRA app , but the suggested "npm fix" is questionable

I ran npx create-react-app project-a for my project and right away i found 27 vulnerabilities (16 moderate, 9 high, 2 critical) in my console.
As new developer this looks very scary, so i ran npm audit fix and noticed that many of them are related to Regular Expression stuff in browserslist , the npm audit fix didnt do anything, i still have 27 vulnerabilities.
After a bit of googling i found this closed github issue where the solution is apparently to move react-scripts to devDependencies ( that didnt remove the warnings ).
These warnings are false positives. There are no actual vulnerabilities affecting your app here.
To remove npm audit warnings, move react-scripts from dependencies to devDependencies in your package.json.
I found another github issue and someone said to add this to my package.json to change the version of the sub-dependency because react-dev-utils package uses a vulnerable version (7.0.9) of immer as a dependency ( it didnt fix it ).
"resolutions": {
"immer": "9.0.7",
"ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"ansi-regex": "5.0.1",
"nth-check": "2.0.1",
"glob-parent": "6.0.1",
"browserslist": "4.18.1"
}
At the very end of the audit it was suggested to run npm audit fix --force and that it includes breaking changes ! very-scary.
The breaking changes were this pretty much :
PS G:\Workspaces\React\project-a> npm audit fix --force
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating react-scripts to 0.9.5,which is a SemVer major change.
Big jump right there from version 4.0.3 down to 0.9.5 and of course it resulted in 43 vulnerabilities , and it suggested running npm audit fix --force yet again to go back to 4.0.3, so i did :
npm WARN audit Updating react-scripts to 4.0.3,which is a SemVer major change.
It's an infinite loop , going back and fourth between react-scripts 0.9.5 and 4.0.3 .
My Node version is : 16.13.1
My NPM version is : 8.1.2
I dont have CRA installed globally.
My Package.json :
{
"name": "project-a",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/css": "^11.5.0",
"#emotion/react": "^11.7.0",
"#emotion/styled": "^11.6.0",
"#mui/icons-material": "^5.2.1",
"#mui/material": "^5.1.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"styled-components": "^5.3.3"
},
"devDependencies": {
"react-scripts": "^4.0.3"
},
"resolutions": {
"immer": "9.0.7",
"ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"ansi-regex": "5.0.1",
"nth-check": "2.0.1",
"glob-parent": "6.0.1",
"browserslist": "4.18.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
You can use npm >8.3.0 with the overrides feature.
Just add to package.json:
...
"overrides": {
"immer": "9.0.7",
"ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"ansi-regex": "5.0.1",
"nth-check": "2.0.1",
"glob-parent": "6.0.1",
"browserslist": "4.18.1"
},
...

Lodash vulnerability in Angular project

After installing npm to the blur-admin template https://github.com/akveo/blur-admin
I had a number of issues which I fixed by using the run recomendations in the npm audit dialog. However I cant fix one even after running
$ npm install lodash#latest --save
I have updated the lodash file in package.json:
{
"name": "blur_admin",
"version": "1.3.1",
"devDependencies": {
"bower": "~1.8.4",
"browser-sync": "^2.26.3",
"browser-sync-spa": "~1.0.3",
"chalk": "~1.1.1",
"del": "~2.2.2",
"eslint-plugin-angular": "~0.12.0",
"estraverse": "~4.2.0",
"gulp": "^4.0.0",
"gulp-angular-filesort": "^1.2.1",
"gulp-angular-templatecache": "~2.0.0",
"gulp-autoprefixer": "~3.1.1",
"gulp-eslint": "^5.0.0",
"gulp-filter": "~4.0.0",
"gulp-flatten": "~0.3.1",
"gulp-gh-pages": "^0.5.4",
"gulp-inject": "~4.1.0",
"gulp-load-plugins": "~1.4.0",
"gulp-minify-css": "~1.2.1",
"gulp-minify-html": "~1.0.4",
"gulp-ng-annotate": "~2.0.0",
"gulp-prompt": "^1.1.0",
"gulp-protractor": "^4.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "~0.5.4",
"gulp-rev": "~7.1.2",
"gulp-rev-replace": "~0.4.2",
"gulp-sass": "^4.0.1",
"gulp-shell": "^0.5.2",
"gulp-size": "~2.1.0",
"gulp-sourcemaps": "~1.6.0",
"gulp-uglify": "~2.0.0",
"gulp-useref": "^3.1.6",
"gulp-util": "~3.0.6",
"gulp-zip": "^3.0.2",
"http-proxy-middleware": "~0.17.2",
"lodash": "^4.17.11",
"main-bower-files": "~2.13.1",
"uglify-save-license": "~0.4.1",
"wiredep": "~4.0.0",
"wrench": "~1.5.8"
},
"scripts": {
"postinstall": "bower install"
}
}
But still get:
PS D:\dev\Blur-Admin test\blur-admin-master\blur-admin-master> npm audit
=== npm audit security report ===
Manual Review
Some vulnerabilities require your attention to resolve
Visit https://go.npm.me/audit-guide for additional guidance
Low Prototype Pollution
Package lodash
Patched in >=4.17.5
Dependency of browser-sync-spa [dev]
Path browser-sync-spa > opt-merger > lodash
More info https://nodesecurity.io/advisories/577
found 1 low severity vulnerability in 13272 scanned packages
1 vulnerability requires manual review. See the full report for details.
PS D:\dev\Blur-Admin test\blur-admin-master\blur-admin-master>
I've tried everything!
This usually means that one of the other project dependencies in your project.json has a dependency of lodash and they have not patched their pacakge.json.
The error states which one it is: "browser-sync-spa" and the path to it:
browser-sync-spa > opt-merger > lodash
You would have to open an issue on browser-sync-spa or opt-merger to update their repo/package.json or open a PR for them.
Other option is to live with it or Fork their project which is the nuclear option.

npm - using stale package data

Whenever I do an npm install, I get a ton of messages about it using stale package data. What does that mean and is it something I need to worry about?
Here's a small example of the warning messages I get with an npm install. In this particular example I just added "npm install #angular/animations#latest --save":
WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0
g== integrity checksum failed when using sha512: wanted sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0g== but got sha1-2+xJQ20q4V9TYRTnbRRlbNvA9E0
=. (8538 bytes)
WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUu
g== integrity checksum failed when using sha512: wanted sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug== but got sha1-wVm41b4PnlpvNG2rlPFs4CIWG4g
=. (3618 bytes)
WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0
g== integrity checksum failed when using sha512: wanted sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0g== but got sha1-2+xJQ20q4V9TYRTnbRRlbNvA9E0
=. (8538 bytes)
WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUu
g== integrity checksum failed when using sha512: wanted sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug== but got sha1-wVm41b4PnlpvNG2rlPFs4CIWG4g
=. (3618 bytes)
WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
Here is the current package.json file that I have for my project:
{
"name": "myproject",
"version": "0.0.1",
"license": "me",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --extract-css true",
"build-prod": "ng build -prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"update:packages": "node wipe-dependencies.js && rm -rf node_modules && npm update --save-dev && npm update --save",
"prestyleguide": "ng build --extract-css true",
"styleguide": "rimraf dist/styleguide/ && kss --config kss/kss-config.json --custom hidemarkup --custom hideexample --custom hidedefault --custom fakeexample --placeholder .modifier-class",
"//": "Build just the styleguide without building the entire app (requires that the app has already been built to the dist/ folder)",
"build-styleguide": "rimraf dist/styleguide/ && kss --config kss/kss-config.json --custom hidemarkup --custom hideexample --custom hidedefault --custom fakeexample --placeholder .modifier-class"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.3.3",
"#angular/common": "^4.3.2",
"#angular/compiler": "^4.3.2",
"#angular/core": "^4.3.2",
"#angular/forms": "^4.3.2",
"#angular/http": "^4.3.2",
"#angular/platform-browser": "^4.3.2",
"#angular/platform-browser-dynamic": "^4.3.2",
"#angular/router": "^4.3.2",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28",
"bootstrap": "^4.0.0-alpha.6",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"ngx-mydatepicker": "^2.0.12",
"rxjs": "^5.4.2",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.16"
},
"devDependencies": {
"#angular/cli": "^1.2.3",
"#angular/compiler-cli": "^4.3.2",
"#types/jasmine": "^2.5.53",
"#types/node": "^8.0.15",
"codelyzer": "^3.1.2",
"fs-extra": "^4.0.0",
"jasmine-core": "^2.6.4",
"jasmine-spec-reporter": "^4.1.1",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-coverage-istanbul-reporter": "^1.3.0",
"karma-jasmine": "^1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"kss": "^3.0.0-beta.18",
"protractor": "^5.1.2",
"random-ext": "^2.5.1",
"ts-node": "^3.2.1",
"tslint": "^5.5.0",
"typedoc": "^0.7.1",
"typescript": "^2.4.2"
}
}
try that and then reinstall all of your project's dependencies
rm ./package-lock.json
rm -r ./node_modules
npm cache clear --force
There is a full thread on github about it, since june I think
Since npm 5 you don't have full control over the cache, so for npm 5 you could try
npm cache verify
This helped me. I don't think you have to remove package-lock and node_modules as first step.
Should the cache clear method not work...
I found I had this problem during an OS X update. Installing the Command Line Tools update and restarting iTerm fixed this, incredibly enough.
Certainly not suggesting this is a "proper" solution but was definitely messing with my setup (wtf apple?). Posted in the event someone else viewing this is in the same position 💁🏼
You can try clearing your NPM cache using:
$ npm cache clear --force
Then re-install your node modules.
I hope this helps.
I got this error when using a custom registry (not npmjs.org). The problem was that my registry had gone down.
Before deleting your node_modules, check your internet connection - your provider might do some traffic shaping and blocking or slowing down the access to package repositories. You can spot that if you see something like Miscellaneous Warning ETIMEDOUT: [...] in your error messages.
This was the case for me, and the problem got resolved once I was using VPN.

requires a peer but none was installed

My package.json looks like this
{
"name": "hello-world",
"version": "1.0.0",
"description": "The Hello World",
"author": "",
"license": "MIT",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"dependencies": {
"#angular/common": "~2.0.1",
"#angular/compiler": "~2.0.1",
"#angular/core": "~2.0.1",
"#angular/http": "~2.0.1",
"#angular/platform-browser": "~2.0.1",
"#angular/platform-browser-dynamic": "~2.0.1",
"#angular/router": "~3.0.1",
"#angular/upgrade": "~2.0.1",
"systemjs": "0.19.39",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.25",
"angular-in-memory-web-api": "~0.1.1",
"bootstrap": "4.0.0-alpha.4"
},
"devDependencies": {
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"typings": "^1.4.0"
}
}
When I run npm i it runs successfully but I got some warnings.
npm WARN angular-in-memory-web-api#0.1.17 requires a peer of rxjs#5.0.0-rc.4 but none was installed.
npm WARN angular-in-memory-web-api#0.1.17 requires a peer of zone.js#^0.7.2 but none was installed.
I added these lines to package.json
"peerDependencies": {
"rxjs": "5.0.0-rc.4",
"zone.js": "^0.7.2"
}
But when I run npm i again I still get this warning
npm WARN hello-world#1.0.0 requires a peer of rxjs#5.0.0-rc.4 but none was installed.
npm WARN hello-world#1.0.0 requires a peer of zone.js#^0.7.2 but none was installed.
npm WARN angular-in-memory-web-api#0.1.17 requires a peer of rxjs#5.0.0-rc.4 but none was installed.
npm WARN angular-in-memory-web-api#0.1.17 requires a peer of zone.js#^0.7.2 but none was installed.
with additional warning for the main application.
Why is that and how to get rid from this warning?
TL;DR
Peer Dependencies are a special kind of dependencies - they used by packages which do not call them directly, giving the user (you) the control. Hence, you have to install these packages manually.
You do not need to add peerDependencies to your package.json.
The reason you're seeing these error is, some of your dependencies declare rxjs#5.0.0-rc.4 and zone.js#^0.7.2 in their package.json as peerDependencies. This is why when you've added peerDependencies in your package.json, you get these warning twice.
To understand more about Peer Dependencies I suggest reading these:
Peer Dependencies
What are those PeerDependencies in a NodeJS project?
This great answer
I delete the node_modules folder and run npm install. The error would go away.