I have an Angular app, I have updated the app to the version 11. I have node v15.10.0 and npm v7.6.3. I have also storybook in my project. This is my package.json:
{
"name": "my-project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --port 4200",
"start:webapp": "ng serve --host 0.0.0.0 --disable-host-check --ssl --ssl-key ~/local/ssl/server.key --ssl-cert ~/local/ssl/server.crt --port 4200",
"build": "NODE_ENV=production ng build --prod",
"build:local": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"preinstall": "npx npm-force-resolutions",
"stylelint": "stylelint --fix \"src/**/*.scss\" --config .stylelintrc.json",
"stylelint:diff": "stylelint \"src/**/*scss\" --config .stylelintrc.json",
"format": "prettier --write \"src/app/**/*.{ts,html,scss}\"",
"format:diff": "prettier --list-different \"src/app/**/*.{ts,html,scss}\"",
"analize": "ng build --prod --stats-json && node_modules/.bin/webpack --json | webpack-bundle-analyzer ./dist/poc-architecture-angular/stats.json",
"doc": "compodoc -p tsconfig.base.json src --port 8085 -s",
"storybook": "compodoc -p tsconfig.base.json src -e json && start-storybook -s src/assets -p 9001 -c .storybook",
"cypress:open": "cypress open",
"cypress:run": "cypress run"
},
"resolutions": {
"tapable": "1.1.3"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/app/**/*.{ts,html,scss}": [
"prettier --write"
]
},
"private": true,
"dependencies": {
"@angular/animations": "^11.2.5",
"@angular/cdk": "^11.2.4",
"@angular/common": "^11.2.5",
"@angular/compiler": "^11.2.6",
"@angular/core": "^11.2.5",
"@angular/forms": "^11.2.5",
"@angular/platform-browser": "^11.2.5",
"@angular/platform-browser-dynamic": "^11.2.5",
"@angular/router": "^11.2.5",
"@fortawesome/angular-fontawesome": "^0.8.2",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fullcalendar/angular": "^5.5.0",
"@fullcalendar/core": "^5.5.1",
"@fullcalendar/daygrid": "^5.5.0",
"@fullcalendar/interaction": "^5.5.0",
"@ng-select/ng-select": "^6.1.0",
"@ngrx/effects": "^11.0.1",
"@ngrx/router-store": "^11.0.1",
"@ngrx/store": "^11.0.1",
"@ngrx/store-devtools": "^11.0.1",
"chart.js": "^2.9.3",
"hammerjs": "^2.0.8",
"lodash-es": "^4.17.20",
"moment": "^2.29.1",
"ng2-date-picker": "^11.0.0",
"ngrx-store-localstorage": "^11.0.0",
"ngx-cookie-service": "^11.0.2",
"ngx-webstorage": "^7.0.1",
"rxjs": "~6.6.6",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1102.5",
"@angular/cli": "^11.2.5",
"@angular/compiler-cli": "^11.2.5",
"@babel/core": "^7.13.10",
"@compodoc/compodoc": "^1.1.11",
"@ngrx/schematics": "^11.0.1",
"@storybook/addon-actions": "^6.1.21",
"@storybook/addon-backgrounds": "^6.1.21",
"@storybook/addon-docs": "^6.1.21",
"@storybook/addon-knobs": "^6.1.21",
"@storybook/addon-storysource": "^6.1.21",
"@storybook/addon-viewport": "^6.1.21",
"@storybook/angular": "^6.1.21",
"@storybook/theming": "^6.1.21",
"@types/faker": "^5.1.7",
"@types/fs-extra": "^5.0.2",
"@types/jasmine": "^3.5.14",
"@types/jasminewd2": "~2.0.3",
"@types/lodash": "^4.14.168",
"@types/node": "^12.12.54",
"autoprefixer": "^10.0.1",
"babel-loader": "^8.2.2",
"codelyzer": "^6.0.0",
"css-loader": "^4.3.0",
"cypress": "^4.12.1",
"faker": "^5.1.0",
"husky": "^4.3.8",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.2.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"lint-staged": "^10.5.4",
"ng-packagr": "^11.2.4",
"postcss": "^8.1.0",
"postcss-loader": "^4.0.2",
"prettier": "^2.2.1",
"protractor": "~7.0.0",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"stylelint": "^13.6.1",
"stylelint-config-sass-guidelines": "^7.0.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-order": "^4.1.0",
"stylelint-scss": "^3.18.0",
"tailwindcss": "^2.0.3",
"ts-node": "~8.3.0",
"tslint": "^6.1.3",
"tslint-config-prettier": "^1.18.0",
"typescript": "~4.1.5",
"webpack-bundle-analyzer": "^3.9.0",
"webpack-cli": "^4.5.0"
}
}
When I launch npm i I have this error:
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-actions
npm ERR! dev @storybook/addon-actions@"^6.1.21" from the root project
npm ERR! peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-backgrounds
npm ERR! dev @storybook/addon-backgrounds@"^6.1.21" from the root project
npm ERR! 10 more (@storybook/addon-docs, @storybook/addon-knobs, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.4" from [email protected]
npm ERR! node_modules/@storybook/addon-actions/node_modules/react-inspector
npm ERR! react-inspector@"^5.0.1" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-actions
npm ERR! dev @storybook/addon-actions@"^6.1.21" 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 /home/andrea/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/andrea/.npm/_logs/2021-03-25T16_41_28_107Z-debug.log
I tried to launch --legacy-peer-deps but this creates a package-lock.json with "lockfileVersion" setted to 2.
I want to create a regular situation without this issue. I want to launch only npm I without forcing it. How can I solve?
I have an Angular app, I have updated the app to the version 11. I have node v15.10.0 and npm v7.6.3. I have also storybook in my project. This is my package.json:
{
"name": "my-project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --port 4200",
"start:webapp": "ng serve --host 0.0.0.0 --disable-host-check --ssl --ssl-key ~/local/ssl/server.key --ssl-cert ~/local/ssl/server.crt --port 4200",
"build": "NODE_ENV=production ng build --prod",
"build:local": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"preinstall": "npx npm-force-resolutions",
"stylelint": "stylelint --fix \"src/**/*.scss\" --config .stylelintrc.json",
"stylelint:diff": "stylelint \"src/**/*scss\" --config .stylelintrc.json",
"format": "prettier --write \"src/app/**/*.{ts,html,scss}\"",
"format:diff": "prettier --list-different \"src/app/**/*.{ts,html,scss}\"",
"analize": "ng build --prod --stats-json && node_modules/.bin/webpack --json | webpack-bundle-analyzer ./dist/poc-architecture-angular/stats.json",
"doc": "compodoc -p tsconfig.base.json src --port 8085 -s",
"storybook": "compodoc -p tsconfig.base.json src -e json && start-storybook -s src/assets -p 9001 -c .storybook",
"cypress:open": "cypress open",
"cypress:run": "cypress run"
},
"resolutions": {
"tapable": "1.1.3"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/app/**/*.{ts,html,scss}": [
"prettier --write"
]
},
"private": true,
"dependencies": {
"@angular/animations": "^11.2.5",
"@angular/cdk": "^11.2.4",
"@angular/common": "^11.2.5",
"@angular/compiler": "^11.2.6",
"@angular/core": "^11.2.5",
"@angular/forms": "^11.2.5",
"@angular/platform-browser": "^11.2.5",
"@angular/platform-browser-dynamic": "^11.2.5",
"@angular/router": "^11.2.5",
"@fortawesome/angular-fontawesome": "^0.8.2",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fullcalendar/angular": "^5.5.0",
"@fullcalendar/core": "^5.5.1",
"@fullcalendar/daygrid": "^5.5.0",
"@fullcalendar/interaction": "^5.5.0",
"@ng-select/ng-select": "^6.1.0",
"@ngrx/effects": "^11.0.1",
"@ngrx/router-store": "^11.0.1",
"@ngrx/store": "^11.0.1",
"@ngrx/store-devtools": "^11.0.1",
"chart.js": "^2.9.3",
"hammerjs": "^2.0.8",
"lodash-es": "^4.17.20",
"moment": "^2.29.1",
"ng2-date-picker": "^11.0.0",
"ngrx-store-localstorage": "^11.0.0",
"ngx-cookie-service": "^11.0.2",
"ngx-webstorage": "^7.0.1",
"rxjs": "~6.6.6",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1102.5",
"@angular/cli": "^11.2.5",
"@angular/compiler-cli": "^11.2.5",
"@babel/core": "^7.13.10",
"@compodoc/compodoc": "^1.1.11",
"@ngrx/schematics": "^11.0.1",
"@storybook/addon-actions": "^6.1.21",
"@storybook/addon-backgrounds": "^6.1.21",
"@storybook/addon-docs": "^6.1.21",
"@storybook/addon-knobs": "^6.1.21",
"@storybook/addon-storysource": "^6.1.21",
"@storybook/addon-viewport": "^6.1.21",
"@storybook/angular": "^6.1.21",
"@storybook/theming": "^6.1.21",
"@types/faker": "^5.1.7",
"@types/fs-extra": "^5.0.2",
"@types/jasmine": "^3.5.14",
"@types/jasminewd2": "~2.0.3",
"@types/lodash": "^4.14.168",
"@types/node": "^12.12.54",
"autoprefixer": "^10.0.1",
"babel-loader": "^8.2.2",
"codelyzer": "^6.0.0",
"css-loader": "^4.3.0",
"cypress": "^4.12.1",
"faker": "^5.1.0",
"husky": "^4.3.8",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.2.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"lint-staged": "^10.5.4",
"ng-packagr": "^11.2.4",
"postcss": "^8.1.0",
"postcss-loader": "^4.0.2",
"prettier": "^2.2.1",
"protractor": "~7.0.0",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"stylelint": "^13.6.1",
"stylelint-config-sass-guidelines": "^7.0.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-order": "^4.1.0",
"stylelint-scss": "^3.18.0",
"tailwindcss": "^2.0.3",
"ts-node": "~8.3.0",
"tslint": "^6.1.3",
"tslint-config-prettier": "^1.18.0",
"typescript": "~4.1.5",
"webpack-bundle-analyzer": "^3.9.0",
"webpack-cli": "^4.5.0"
}
}
When I launch npm i I have this error:
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-actions
npm ERR! dev @storybook/addon-actions@"^6.1.21" from the root project
npm ERR! peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-backgrounds
npm ERR! dev @storybook/addon-backgrounds@"^6.1.21" from the root project
npm ERR! 10 more (@storybook/addon-docs, @storybook/addon-knobs, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.4" from [email protected]
npm ERR! node_modules/@storybook/addon-actions/node_modules/react-inspector
npm ERR! react-inspector@"^5.0.1" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-actions
npm ERR! dev @storybook/addon-actions@"^6.1.21" 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 /home/andrea/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/andrea/.npm/_logs/2021-03-25T16_41_28_107Z-debug.log
I tried to launch --legacy-peer-deps but this creates a package-lock.json with "lockfileVersion" setted to 2.
I want to create a regular situation without this issue. I want to launch only npm I without forcing it. How can I solve?
Share Improve this question asked Mar 25, 2021 at 16:56 Andy88Andy88 7574 gold badges11 silver badges30 bronze badges2 Answers
Reset to default 12So something that really kinda sucks right now is react released v17 late last year, and it was pretty much 100% backwards compatible with 16. This means anybody on 16 could upgrade to 17 without any issues. However, there are still many packages out there that list react 16 as a peer dependency but not 17. Well npm v7 changed the way they handle peer dependencies in such a way that you are getting this error. Your best bet is to
- Create an issue and submit a PR to the offending package
react-inspector - In the mean time, use
--forceor--legacy-peer-depsas the error instructs.
EDIT: However, checking the react-inspector project, it looks as though they are listing v17 in their peer deps. Try deleting your package-lock.json and deleting your node_modules and do a fresh install.
You may solve it by cleaning the npm cache and installing the packages from the internet (instead of the cached ones):
rm -Rf node_modules && rm package-lock.json
npm cache clean --force
npm install --force