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
Related
I have just recently started with React Native and expo.
After completing a test app in the local web/dev server, I have been able to get it to work on an Android phone over a USB connection. But now the previously working web/dev server is failing:
> expo start --web
Starting project at C:\...\testproject
Body must be a string. Received: undefined.
Error: Body must be a string. Received: undefined.
at devAssert (C:\...\testproject\node_modules\graphql\jsutils\devAssert.js:12:11)
at new Source (C:\...\testproject\node_modules\graphql\language\source.js:37:56)
at new Parser (C:\...\testproject\node_modules\graphql\language\parser.js:86:62)
at Object.parse (C:\...\testproject\node_modules\graphql\language\parser.js:30:16)
at Object.<anonymous> (C:\...\testproject\node_modules\graphql-tools\src\stitching\introspectSchema.ts:7:48)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! testproject#1.0.0 dev:web: `expo start --web`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the testproject#1.0.0 dev:web script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
The expo build:web command is still working though. It exports a fully functional web app to the web-build directory.
Dependencies:
"dependencies": {
"expo": "^45.0.6",
"expo-gl": "^11.3.0",
"expo-keep-awake": "^10.1.1",
"expo-navigation-bar": "^1.2.0",
"expo-splash-screen": "~0.15.1",
"expo-status-bar": "^1.3.0",
"expo-three": "^6.1.0",
"expo-web-browser": "~10.2.1",
"react": "17.0.2",
"react-dom": "^18.2.0",
"react-native": "0.68.2",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.13.1",
"react-native-web": "^0.18.1",
"three": "^0.141.0"
},
"devDependencies": {
"#babel/core": "^7.18.5",
"#expo/webpack-config": "^0.16.24",
"#types/babel__core": "^7.1.19",
"#types/babel__template": "^7.4.1",
"#types/react": "~18.0.14",
"#types/react-native": "^0.69.0",
"#types/three": "^0.141.0",
"#typescript-eslint/eslint-plugin": "^5.29.0",
"#typescript-eslint/parser": "^5.29.0",
"eas-cli": "^0.54.1",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"expo-cli": "^5.4.11",
"expo-dev-client": "^1.0.0",
"husky": "^8.0.0",
"prettier": "^2.7.1",
"typescript": "~4.7.4"
}
Problem solved.
expo start -c -w (with -c to clear the cache) revealed the problem.
Apparently a dependency update had gone wrong; React is at 17, and React-DOM and the types are at 18. Upgrading all to 18 resulted in new/different errors, so I have now downgraded all to 17 and the dev server is working again.
for me, I had expo-cli as a dependency, as soon as I removed this, the message went away
I had expo-cli(v5.4.7) as a dev dependency. Upgrading to v6.0.6 made it work for me
I just tried to upgrade my expo app from SDK version 42 to version 44. I did the following commands:
npm i -g expo-cli
expo upgrade
When I try to run npm install i get this:
The expo package was found in your package.json but we couldn't resolve the Expo SDK version. Run npm install and then try this command again.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: expo-standard-web-crypto#1.2.0
npm ERR! Found: expo-random#12.1.2
npm ERR! node_modules/expo-random
npm ERR! expo-random#"~12.1.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional expo-random#"12.1.0" from expo-standard-web-crypto#1.2.0
npm ERR! node_modules/expo-standard-web-crypto
npm ERR! expo-standard-web-crypto#"^1.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: expo-random#12.1.0
npm ERR! node_modules/expo-random
npm ERR! peerOptional expo-random#"12.1.0" from expo-standard-web-crypto#1.2.0
npm ERR! node_modules/expo-standard-web-crypto
npm ERR! expo-standard-web-crypto#"^1.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/michaelschmitz/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/michaelschmitz/.npm/_logs/2022-02-21T19_18_50_348Z-debug.log
I've never updated expo before and am unfamiliar with working with dependencies and package.jsons
here is my package.json as well:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"update-deps": "npm install -g npm && npm install -g expo-cli && npm install",
"build-ios": "expo bi --release-channel beta -t archive",
"build-android": "expo ba --release-channel beta -t app-bundle"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/vector-icons": "^12.0.0",
"#react-native-community/slider": "4.1.12",
"#react-native-community/viewpager": "5.0.11",
"#react-native-masked-view/masked-view": "0.2.6",
"#react-navigation/drawer": "^5.12.9",
"#react-navigation/native": "^5.9.8",
"#react-navigation/stack": "^5.14.9",
"base-64": "^1.0.0",
"create-react-class": "^15.7.0",
"expo": "^44.0.0",
"expo-asset": "~8.4.6",
"expo-constants": "~13.0.1",
"expo-file-system": "~13.1.4",
"expo-font": "~10.0.4",
"expo-linking": "~3.0.0",
"expo-mail-composer": "~11.1.0",
"expo-notifications": "~0.14.0",
"expo-print": "~11.1.0",
"expo-sharing": "~10.1.0",
"expo-splash-screen": "~0.14.1",
"expo-sqlite": "~10.1.0",
"expo-standard-web-crypto": "^1.1.0",
"expo-status-bar": "~1.2.0",
"expo-web-browser": "~10.1.0",
"moment": "^2.29.1",
"native-base": "^2.13.15",
"pdf-lib": "^1.16.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-actionsheet": "^2.4.2",
"react-native-chart-kit": "^5.6.1",
"react-native-datepicker": "^1.7.2",
"react-native-elements": "^2.3.2",
"react-native-gesture-handler": "~2.1.0",
"react-native-modal": "^11.10.0",
"react-native-modal-picker": "^0.0.16",
"react-native-paper": "^4.9.2",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-simple-time-picker": "^0.2.0",
"react-native-svg": "12.1.1",
"react-native-web": "0.17.1",
"utf8": "^3.0.0",
"uuid": "^8.3.2",
"expo-random": "~12.1.1",
"expo-updates": "~0.11.6"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react": "~17.0.21",
"#types/react-dom": "~17.0.9",
"#types/react-native": "~0.64.12",
"#types/uuid": "^8.3.1",
"#typescript-eslint/eslint-plugin": "^4.29.3",
"#typescript-eslint/parser": "^4.29.3",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-react-native": "^3.11.0",
"jest-expo": "^44.0.0",
"typescript": "~4.3.5"
},
"private": true
}
This is in a react-native app and I was previously using version 42.
From your error you should revert back to your last working Expo 42 commit. Then do the following
npm uninstall expo-random
expo install expo-standard-web-crypto
The first will remove any direct dependency to expo-random from your package.json.
The second will reinstall expo-standard-web-crypto to the currently supported version for Expo 42.
Do you your test and commit if it works.
Then retry the update.
General process
The general process I have when doing an upgrade is:
determine what direct dependencies are not needed by the app and uninstall them or move them to devDependencies if it should've been a dev dependency like jest, #types etc.
test to make sure app still works
attempt upgrade
note the errors and deal with the problematic dependencies
dealing with the problematic dependency may simply be updating the version of the dep, or
revendor the improper dependencies yourself since it may take months for any fix to go through upstream,
change your code so you don't use it because the upstream may no longer be maintained except by renovate bots
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.
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.
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.