NodeJS 如何读取NPM依赖错误?

vom3gejh  于 2023-04-20  发布在  Node.js
关注(0)|答案(1)|浏览(109)

我试图在一个相当过时的项目上运行npm install,并不断遇到NPM依赖错误。我在各种项目中遇到过数百个类似的错误,但我还没有找到一个好的指南来阅读它们。This thread最接近,但并没有真正描述一般情况,these docs帮助我理解依赖的底层结构,但并不能真正帮助我调试。
下面是我现在遇到的错误,从底部开始,我的解释是@aws-amplify/ui-react@1.2.26需要react-dom@">=16.7.0",但除此之外我不明白。看起来react-dom@18.2.0需要react@"^18.2.0",但我不明白这有什么关系,因为react-dom甚至不是我项目中的依赖项(至少没有明确声明)。
我认为缩进块意味着错误来自嵌套的依赖项,但我真的不知道这是怎么回事。同样,上面的错误也与@aws-amplify/ui-react@1.2.26有关,但我不能判断它是否导致下面的错误,反之亦然(或者它们完全无关?)。
我希望得到1)关于如何将NPM依赖错误破译为可操作步骤的一般建议,以及2)关于如何修复此特定错误的建议。
还请注意,我尝试了npm update @aws-amplify/ui-react@1.2.26,但我遇到了类似的错误。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: myapp@0.0.1
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR!   peer react@">= 16.7.0" from @aws-amplify/ui-react@1.2.26
npm ERR!   node_modules/@aws-amplify/ui-react
npm ERR!     @aws-amplify/ui-react@"^1.2.26" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from react-dom@18.2.0
npm ERR! node_modules/react-dom
npm ERR!   peer react-dom@">= 16.7.0" from @aws-amplify/ui-react@1.2.26
npm ERR!   node_modules/@aws-amplify/ui-react
npm ERR!     @aws-amplify/ui-react@"^1.2.26" 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依赖项的完整列表在这里:

"dependencies": {
    "@aws-amplify/core": "^4.3.12",
    "@aws-amplify/ui-react": "^1.2.26",
    "@babel/plugin-proposal-decorators": "^7.16.7",
    "@flyskywhy/react-native-gcanvas": "^2.3.22",
    "@nozbe/watermelondb": "^0.24.0",
    "@react-native-async-storage/async-storage": "^1.17.6",
    "@react-native-community/checkbox": "^0.5.9",
    "@react-native-community/datetimepicker": "^4.0.1",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "^6.2.1",
    "@react-navigation/bottom-tabs": "^5.11.15",
    "@react-navigation/native": "^5.9.8",
    "@react-navigation/stack": "^5.14.9",
    "@testing-library/react-hooks": "^5.1.3",
    "amazon-cognito-identity-js": "^5.2.4",
    "aws-amplify": "^4.3.12",
    "aws-amplify-react-native": "^5.0.5",
    "babel-preset-react-native": "^4.0.1",
    "crypto": "^1.0.1",
    "eslint-plugin-react": "^7.31.0",
    "eslint-plugin-react-native": "^4.0.0",
    "formik": "^2.2.9",
    "generate-username-from-email": "^1.0.2",
    "graphql": "^16.2.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "prop-types": "^15.8.1",
    "react": "17.0.1",
    "react-native": "0.64.1",
    "react-native-bootsplash": "^3.2.7",
    "react-native-canvas": "^0.1.38",
    "react-native-chart-kit": "^6.11.0",
    "react-native-confirmation-code-input": "^1.0.4",
    "react-native-device-info": "^10.5.1",
    "react-native-dotenv": "^3.3.1",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-i18n": "^2.0.15",
    "react-native-idle-timer": "^2.1.7",
    "react-native-keychain": "^7.0.0",
    "react-native-reanimated": "2.2.4",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.4.0",
    "react-native-svg": "^12.1.1",
    "react-native-toast-notifications": "^3.2.3",
    "react-native-vector-icons": "^8.1.0",
    "react-native-video": "^5.2.0",
    "react-native-video-controls": "^2.8.1",
    "react-native-vimeo-iframe": "^1.0.4",
    "react-native-webview": "^11.21.1",
    "react-navigation": "^4.4.4",
    "unique-username-generator": "^1.0.1",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/runtime": "^7.16.7",
    "@react-native-community/eslint-config": "^2.0.0",
    "@testing-library/react-native": "^7.2.0",
    "@types/react-native-vector-icons": "^6.4.10",
    "babel-jest": "^26.6.3",
    "eslint": "^8.22.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-n": "^15.2.5",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-promise": "^6.0.1",
    "husky": "^6.0.0",
    "jest": "^26.6.3",
    "jetifier": "^1.6.8",
    "metro-react-native-babel-preset": "^0.64.0",
    "prettier": "^2.7.1",
    "react-test-renderer": "17.0.1"
  }
9jyewag0

9jyewag01#

您的特定错误是由版本号不匹配引起的。您正在为项目指定React的版本(17.0.1)在您的package.json中,并且(通过@aws-amplify/ui-react@^1.2.26,它需要react-dom@>=16.7.0,但当前正在使用react-dom@18.2.0,这反过来又需要react@18.2.0)加载不兼容的版本作为对等依赖项。这样做的原因是在某些时候react-dom是必需的,现在版本号太高了,您应该能够通过降级react-dom的版本来解决这个问题,以匹配您的react(17.0.1)版本,它仍然满足react-dom@>=16.7.0的要求。
在这种情况下,已经解决的依赖关系已经形成了一个结,您也可以通过删除package-lock.json并重新运行npm install来解决问题。

如何读取NPM依赖错误?

好消息是你自己的调查是正确的。你应该试着为你的项目得到依赖图(npm list)并跟踪哪些模块需要哪些子模块-这可以有几层嵌套。运行npm list [module]来查看给定模块的依赖关系也很有用。这可以让你在添加新模块时一目了然地看到哪些现有的依赖项可能会受到影响。如果你再次遇到同样的问题,这可能足以让你摆脱困境。
我们还可以仔细查看您收到的一些错误消息。

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from react-dom@18.2.0
npm ERR! node_modules/react-dom
npm ERR!   peer react-dom@">= 16.7.0" from @aws-amplify/ui-react@1.2.26
npm ERR!   node_modules/@aws-amplify/ui-react
npm ERR!     @aws-amplify/ui-react@"^1.2.26" from the root project

这里需要注意的关键是,react-dom的依赖版本不是使用的版本号与需要它的地方相同。这通常意味着有多个地方是依赖,NPM已经尝试解决所有冲突,但由于NPM列出了所有需要冲突依赖的地方,我们知道这不是这里的情况。如果你想更深入地理解这一点,我建议你阅读关于package-lock.json的用途。
@aws-amplify/ui-react被指定为“来自根项目”,所以我们知道它是一个顶级依赖项。通常情况下,如果版本不匹配,如果您可以跟踪所有依赖项到根依赖项,您可以查看潜在的bumping一个或多个根依赖项来解决问题。
最后,您可以固定依赖的特定版本并覆盖NPM自己的版本解析机制。当您想要使用嵌套依赖的补丁版本而不更新依赖于该包的所有内容时,这是最有用的,例如删除项目中的漏洞。如果您不确定正在做什么,则会有风险,您可以使用package.jsonoverrides部分来完成此操作。

相关问题