React/TypeScript项目添加wagmi、viem时的包兼容性问题解决

当前项目使用react-scripts 5.0.1、TypeScript 4.9.5，执行npm i wagmi viem时触发npm依赖解析错误，提示TypeScript最低版本要求为5.0.4，报错信息如下：

npm i wagmi viem

 - npm WARN ERESOLVE overriding peer dependency
 - npm WARN ERESOLVE overriding peer dependency
 - npm ERR! code ERESOLVE
 - npm ERR! ERESOLVE could not resolve
 - npm ERR!
 - npm ERR! While resolving: viem@1.2.12
 - npm ERR! Found: typescript@4.9.5
 - npm ERR! node_modules/typescript
 - npm ERR!   peerOptional typescript@">=5.0.4" from @wagmi/chains@1.2.0
 - npm ERR!   node_modules/viem/node_modules/@wagmi/chains
 - npm ERR!     @wagmi/chains@"1.2.0" from viem@1.2.12
 - npm ERR!     node_modules/viem
 - npm ERR!       viem@"*" from the root project
 - npm ERR!
 - npm ERR! Could not resolve dependency:
 - npm ERR! peerOptional typescript@">=5.0.4" from viem@1.2.12
 - npm ERR! node_modules/viem
 - npm ERR!   viem@"*" from the root project
 - npm ERR!
 - npm ERR! Conflicting peer dependency: typescript@5.1.6
 - npm ERR! node_modules/typescript
 - npm ERR!   peerOptional typescript@">=5.0.4" from viem@1.2.12
 - npm ERR!   node_modules/viem
 - npm ERR!     viem@"*" 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.

解决方法 #

方案1：升级TypeScript到兼容版本 #

直接将TypeScript升级至5.0.4及以上版本，这是最稳妥的解决方式，react-scripts 5.0.1对TypeScript 5.x版本兼容良好：

npm install typescript@^5.0.4 --save-dev

升级完成后，重新执行npm i wagmi viem即可正常安装。

方案2：忽略peer依赖冲突（有风险） #

如果暂时无法升级TypeScript，可以使用npm的--legacy-peer-deps参数跳过peer依赖检查，该参数会恢复npm v6的依赖解析逻辑：

npm i wagmi viem --legacy-peer-deps

或者使用--force强制安装，但可能引发潜在的类型不兼容问题，后续开发中可能出现TypeScript编译报错，需谨慎使用：

npm i wagmi viem --force

方案3：安装兼容TypeScript 4.9.5的旧版本包 #

若必须保留TypeScript 4.9.5，可以指定安装wagmi和viem的旧版本，这些版本不要求TypeScript 5.x：

npm install wagmi@^0.12.12 viem@^0.3.10

注意：旧版本可能缺少最新功能和安全更新，需根据项目需求权衡。

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