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

Question

I'm trying to add the wagmi and viem packages to my project. My project has react-scripts package and I'm using the latest version 5.0.1. Typescript is running version 4.9.5. However, when I try to add wagmi and viem, the minimum typescript version required is 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: 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.

Answer 1

viem@1.2.12 and @wagmi/chains@1.2.0 packages require TypeScript as their peer dependency, the version should be >=5.0.4. This warning will appear when you use npm v7 (Node v15).

$ npm view viem@1.2.12 peerDependencies
{ typescript: '>=5.0.4' }

$ npm view @wagmi/chains@1.2.0 peerDependencies
{ typescript: '>=5.0.4' }

1. Upgrade TypeScript to version >=5.0.4:

npm i typescript@^5.0.4 -D

2. See Allowing TypeScript 5 in peerDependencies and Announcement of TypeScript 5.0

So you can use --legacy-peer-depsoption

npm i wagmi viem --legacy-peer-deps