Menu
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?
815
If your npm is broken: On Mac or Linux, reinstall npm. Windows: If you're on Windows and you have a broken installation, the easiest thing to do is to reinstall node from the official installer (see this note about installing the latest stable version).
Install the dependencies to the local node_modules folder. In global mode (ie, with -g or --global appended to the command), it installs the current package context (ie, the current working directory) as a global package. By default, npm install will install all modules listed as dependencies in package. json .
So 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
react-inspector
--force or --legacy-peer-deps as 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.
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
