How to solve package incompatibility when adding wagmi viem to React/Typescript project?

Question

I am trying to add wagmi and viem packages to the project. My project has react-scripts package and I am using the latest version 5.0.1. Typescript is running with version 4.9.5. However, when I try to add wagmi and viem, the typescript is requested in minimum version 5.0.4. How can I solve this problem?

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: [email protected]
 - npm ERR! Found: [email protected]
 - npm ERR! node_modules/typescript
 - npm ERR!   peerOptional typescript@">=5.0.4" from @wagmi/[email protected]
 - npm ERR!   node_modules/viem/node_modules/@wagmi/chains
 - npm ERR!     @wagmi/chains@"1.2.0" from [email protected]
 - 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 [email protected]
 - npm ERR! node_modules/viem
 - npm ERR!   viem@"*" from the root project
 - npm ERR!
 - npm ERR! Conflicting peer dependency: [email protected]
 - npm ERR! node_modules/typescript
 - npm ERR!   peerOptional typescript@">=5.0.4" from [email protected]
 - 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.

Answer 1

I have been having a similar issue. It is not with wagmi viem but I found a workaround on this GitHub issue here. I hope it helped.

Answer 2

[email protected] and @wagmi/[email protected] packages require TypeScript as their peer dependency and the version should be >=5.0.4. The warning will display when you are using npm v7+(Node v15+).

$ npm view [email protected] peerDependencies
{ typescript: '>=5.0.4' }

$ npm view @wagmi/[email protected] peerDependencies
{ typescript: '>=5.0.4' }

1. Upgrading TypeScript to version >=5.0.4:

npm i typescript@^5.0.4 -D

2. See Allow TypeScript 5+ in peerDependencies and Announcing TypeScript 5.0

5.0 is not a disruptive release, and everything you know is still applicable.

So you can use the --legacy-peer-deps option

npm i wagmi viem --legacy-peer-deps