React/Next集成WalletConnect时Web3Modal报错求助

原因 #

这个错误由依赖版本不兼容引发：@web3modal/wagmi 3.3.2 对 wagmi 和 viem 有严格的版本适配要求，你当前使用的 wagmi@1.4.2 和 viem@1.13.1 版本过高，导致内部依赖的 lit 相关包（@lit/reactive-element）出现构造函数继承异常。另外，Next.js 默认不转译 node_modules 中的部分包，未处理的 ES 语法也会在浏览器中触发报错。

解决方案 #

1. 锁定兼容的依赖版本 #

修改 package.json 中的依赖版本为 @web3modal/wagmi 3.3.2 官方适配的组合：

"dependencies": {
  // ...其他依赖
  "@web3modal/wagmi": "3.3.2",
  "wagmi": "1.3.11",
  "viem": "1.10.19"
  // ...其他依赖
}

执行以下命令重新安装依赖：

# 删除现有依赖和锁文件
rm -rf node_modules package-lock.json
# 重新安装
npm install

2. 配置 Next.js 转译相关依赖 #

在 next.config.js 中添加转译配置，让 Next.js 处理 lit 相关包的语法：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@lit/reactive-element', 'lit'],
}

module.exports = nextConfig

3. 清理缓存 #

删除 Next.js 的缓存目录，避免旧缓存干扰：

rm -rf .next

重启开发服务器：

npm run dev

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