如何解决Web3Modal安装中的npm依赖冲突与漏洞问题？

问题背景 #

通过npx create-next-app@latest创建Next.js项目后，执行npm install @web3modal/wagmi wagmi viem @tanstack/react-query安装依赖时，出现peer dependency版本冲突警告，同时检测到9个中等严重级别的漏洞。尝试npm audit fix --force修复后，问题反而恶化。

具体警告信息 #

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-native@0.74.1
npm WARN Found: react@18.3.1
npm WARN node_modules/react
npm WARN   peer react@">=16.8.0" from @emotion/react@11.11.4
npm WARN   node_modules/@emotion/react
npm WARN     @emotion/react@"^11.11.4" from @thirdweb-dev/react@4.6.14
npm WARN     node_modules/@thirdweb-dev/react
npm WARN     3 more (@emotion/styled, thirdweb, @emotion/styled)
npm WARN   63 more (@emotion/use-insertion-effect-with-fallbacks, ...)
npm WARN Could not resolve dependency:
npm WARN peer react@"18.2.0" from react-native@0.74.1
npm WARN node_modules/react-native
npm WARN   peerOptional react-native@"*" from @metamask/sdk@0.18.6
npm WARN   node_modules/@metamask/sdk
npm WARN   5 more (@metamask/sdk-install-modal-web, ...)
npm WARN Conflicting peer dependency: react@18.2.0
npm WARN node_modules/react
npm WARN   peer react@"18.2.0" from react-native@0.74.1
npm WARN   node_modules/react-native
npm WARN     peerOptional react-native@"*" from @metamask/sdk@0.18.6
npm WARN     node_modules/@metamask/sdk
npm WARN     5 more (@metamask/sdk-install-modal-web, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-i18next@13.5.0
npm WARN Found: i18next@22.5.1
npm WARN node_modules/@metamask/sdk/node_modules/i18next
npm WARN   i18next@"22.5.1" from @metamask/sdk@0.18.6
npm WARN   node_modules/@metamask/sdk
npm WARN     @metamask/sdk@"0.18.6" from @wagmi/connectors@4.3.3
npm WARN     node_modules/@wagmi/connectors
npm WARN   1 more (@metamask/sdk-install-modal-web)
npm WARN Could not resolve dependency:
npm WARN peer i18next@">= 23.2.3" from react-i18next@13.5.0
npm WARN node_modules/@metamask/sdk/node_modules/react-i18next
npm WARN   peer react-i18next@"^13.2.2" from @metamask/sdk-install-modal-web@0.18.5
npm WARN   node_modules/@metamask/sdk/node_modules/@metamask/sdk-install-modal-web
npm WARN Conflicting peer dependency: i18next@23.11.3
npm WARN node_modules/i18next
npm WARN   peer i18next@">= 23.2.3" from react-i18next@13.5.0
npm WARN   node_modules/@metamask/sdk/node_modules/react-i18next
npm WARN     peer react-i18next@"^13.2.2" from @metamask/sdk-install-modal-web@0.18.5
npm WARN     node_modules/@metamask/sdk/node_modules/@metamask/sdk-install-modal-web
183 packages are looking for funding
  run `npm fund` for details
9 moderate severity vulnerabilities
To address issues that do not require attention
  npm audit fix
To address all issues (including breaking chang
  npm audit fix --force
Run `npm audit` for details.

可行解决办法 #

• 锁定冲突依赖版本，用overrides强制统一
  在package.json中添加overrides字段，强制指定兼容版本：

  {
    "overrides": {
      "react": "18.2.0",
      "i18next": "23.11.3"
    }
  }
  

  删除node_modules和package-lock.json，重新执行npm install，强制所有依赖使用指定版本以消除冲突警告。

• 用legacy-peer-deps模式安装依赖
  安装时添加--legacy-peer-deps参数，跳过peer依赖的严格检查：

  npm install @web3modal/wagmi wagmi viem @tanstack/react-query --legacy-peer-deps
  

  该模式沿用npm v6的依赖解析逻辑，适合处理跨库版本冲突。

• 降级Web3Modal/Wagmi到兼容版本
  尝试安装官方推荐的稳定兼容版本，避免依赖冲突：

  npm install @web3modal/wagmi@latest wagmi@latest viem@latest @tanstack/react-query@latest
  

  也可查看官方文档确认适配Next.js的版本组合。

• 针对性修复漏洞，避免强制修复
  npm audit fix --force易引发更多冲突，先查看漏洞详情：

  npm audit
  

  根据结果手动升级有漏洞的依赖，或在overrides中指定修复版本，例如：

  npm install [vulnerable-package]@[fixed-version]
  

• 切换到pnpm或yarn
  pnpm/yarn的依赖解析逻辑更优，能自动处理多数冲突，且漏洞修复更温和：

  1. 安装pnpm：npm install -g pnpm
  2. 删除node_modules、package-lock.json
  3. 执行pnpm install

内容的提问来源于stack exchange，提问作者Alexxz