requires a peer but none was installed - npm

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.

Related

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

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"
}
}

Difference between `npm update` and `remove package-lock.json` plus `npm install`?

What is essential difference between these commands, except that npm update modify package.json?
rm package-lock.json
npm install
npm update --dev
In package-lock.json basically the indirect dependencies are locked. The indirect dependencies mean those dependencies, that are not specified in the package.json of your project but they are the dependencies of your dependencies.
When npm update --dev is called some dependencies are updated in the package.json. After the entries are updated an install is called, this install updates in package-lock.json those thirdparties that are in connection with the modified ones in the package.json. This means that both the direct and indirect dependencies are updated in the package-lock.json. But only for those, that were modified in package.json.
The thirdparties that remained the same in the package.json won't be touched in the package-lock.json. (Both direct and indirect dependencies of them remain the same.)
When rm package-lock.json and npm install is called, then the information is lost about the indirect dependencies with the removing of the package-lock.json. As npm install is called, a new package-lock.json is generated and the indirect dependencies could be changed for all of your dependencies.
Let's see an example for this.
In package-lock.json we have an indirect dependency the tslib: 1.9.0.
"tslib": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
"integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ=="
},
The tslib is a dependency of all Angular modules, that are specified directly in thepackage.json:
"dependencies": {
"#angular/animations": "8.2.12",
"#angular/cdk": "~8.2.3",
"#angular/common": "8.2.12",
"#angular/compiler": "8.2.12",
"#angular/core": "8.2.12",
"#angular/flex-layout": "^8.0.0-beta.27",
"#angular/forms": "8.2.12",
"#angular/material": "^8.2.3",
"#angular/platform-browser": "8.2.12",
"#angular/platform-browser-dynamic": "8.2.12",
"#angular/platform-server": "8.2.12",
"#angular/router": "8.2.12",
"#nguniversal/module-map-ngfactory-loader": "8.1.1",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.3.1",
"core-js": "^2.6.5",
"hammerjs": "^2.0.8",
"jquery": "3.4.1",
"oidc-client": "^1.9.0",
"popper.js": "^1.14.3",
"rxjs": "^6.4.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.800.6",
"#angular/cli": "8.3.18",
"#angular/compiler-cli": "8.2.12",
"#angular/language-service": "8.2.12",
"#types/jasmine": "~3.3.9",
"#types/jasminewd2": "~2.0.6",
"#types/node": "~11.10.5",
"codelyzer": "^5.0.1",
"jasmine-core": "~3.3.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.5",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"typescript": "3.4.5"
},
"optionalDependencies": {
"node-sass": "^4.9.3",
"protractor": "~5.4.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
If we call npm update --dev, following changes are done:
+ bootstrap#4.5.0
+ core-js#2.6.11
+ popper.js#1.16.1
+ karma-jasmine-html-reporter#1.5.4
+ karma-coverage-istanbul-reporter#2.0.6
+ codelyzer#5.2.2
+ karma#4.4.1
+ #types/jasmine#3.3.16
+ #types/jasminewd2#2.0.8
+ oidc-client#1.10.1
+ rxjs#6.5.5
We can see, that in the package.json the Angular dependencies are not touched. It follows that the tslib is also remained on version 1.9.0 in the package-lock.json.
However if we remove the package-lock.json, remove the node_modules, do the above updates in the package.json manually and call npm install we can see in the newly generated package-lock.json that the tslib is also updated to 1.12.0. (If we do not remove the node_modules the same version could be put back in the package-lock.json as previously.)
Conclusion
So the difference is, that in case of npm update --dev only those direct and indirect dependencies are updated, which were in connection with the changed ones in the package.json. But in case of rm package-lock.json and npm install all indirect dependencies can change.

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.

webpack- peer dependency versioning mismatch issue?

While installing npm packages I am getting peer dependencies versioning mismatch issue.
Error -
npm ERR! peerinvalid The package webpack#2.1.0-beta.12 does not
satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer babel-loader#6.2.4 wants webpack#1 || ^2.1.0-beta
npm ERR! peerinvalid Peer karma-webpack#1.7.0 wants webpack#^1.4.0
npm ERR! peerinvalid Peer webpack-dev-server#2.0.0-beta wants webpack#>=2.0.3-beta <3
Has any one faced something like this?
package.json file
{
"private": true,
"dependencies": {
"todomvc-app-css": "2.0.4",
"todomvc-common": "1.0.2"
},
"devDependencies": {
"babel": "6.5.2",
"babel-core": "6.8.0",
"babel-eslint": "6.0.4",
"babel-loader": "6.2.4",
"babel-plugin-__coverage__": "1.11.111",
"babel-preset-es2015-webpack": "6.4.1",
"babel-preset-stage-2": "6.5.0",
"chai": "3.5.0",
"cpy-cli": "1.0.0",
"css-loader": "0.23.1",
"eslint": "2.9.0",
"eslint-config-kentcdodds": "6.2.1",
"eslint-loader": "1.3.0",
"ghooks": "1.2.1",
"istanbul": "0.4.3",
"karma": "0.13.22",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "1.0.1",
"karma-coverage": "1.0.0",
"karma-mocha": "1.0.1",
"karma-webpack": "1.7.0",
"mocha": "2.5.3",
"npm-run-all": "1.8.0",
"opt-cli": "1.4.2",
"rimraf": "2.5.2",
"style-loader": "0.13.1",
"webpack": "^2.0.0-beta",
"webpack-dev-server": "2.0.0-beta",
"webpack-validator": "2.1.2"
}
Please suggest what exactly, I am doing wrong?
Your error message explain everything:
You use webpack 2 but karma-webpack wants to webpack 1. You can:
downgrade webpack 2 to version 1 and downgrade webpack-dev-server to version 1.
or
remove karma-webpack