npm 安裝問題 - 無法解決依賴關系。 有解決辦法嗎？

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 改變了它們處理對等依賴項的方式，導致您收到此錯誤。 你最好的選擇是

1. 創建一個問題並將 PR 提交給有問題的 package react-inspector
2. 同時，按照錯誤指示使用--force或--legacy-peer-deps 。

編輯：但是，檢查react-inspector項目，看起來他們好像在他們的 peer deps 中列出了 v17 。 嘗試刪除您的 package-lock.json 並刪除您的 node_modules 並重新安裝。

Answer 2

您可以通過清理 npm 緩存並從 Internet 安裝包（而不是緩存的包）來解決它：

rm -Rf node_modules && rm package-lock.json
npm cache clean --force
npm install --force