javascript - npm install 的问题 - 无法解决依赖关系。有解决办法吗？

Question

我有一个 Angular 应用程序，我已将应用程序更新到版本 11。我有节点 v15.10.0 和 npm v7.6.3。我的项目中也有故事书。这是我的 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"
      }
    }

当我启动 npm 我有这个错误:

npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/addon-actions@6.1.21
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/addon-backgrounds@6.1.21
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 react-inspector@5.1.0
npm ERR! node_modules/@storybook/addon-actions/node_modules/react-inspector
npm ERR!   react-inspector@"^5.0.1" from @storybook/addon-actions@6.1.21
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

我尝试启动 --legacy-peer-deps 但这会创建一个 package-lock.json，其中“lockfileVersion”设置为 2。
我想创造一个没有这个问题的常规情况。我只想启动 npm I 而不强制它。我该如何解决？

Answer 1

所以现在真正有点糟糕的是去年年底发布的 React v17，它几乎 100% 向后兼容 16。这意味着 16 上的任何人都可以毫无问题地升级到 17。但是，仍然有许多软件包将 react 16 列为对等依赖项，而不是 17。好吧，npm v7 改变了它们处理对等依赖项的方式，导致您收到此错误。你最好的选择是

创建一个问题并将 PR 提交到有问题的包 react-inspector

同时，使用 --force或 --legacy-peer-deps如错误所示。

编辑:但是，检查 react-inspector项目，看起来好像他们 are listing v17 in their peer deps .尝试删除您的 package-lock.json 并删除您的 node_modules 并重新安装。