web3-react集成WalletConnect/WalletLink触发Module parse failed错误求解

云原生阿岚

2026-9-30

问题根因

你当前使用的react-scripts-ts@2.15.1版本内置的webpack和babel版本过低，无法识别pify包中使用的ES2018对象扩展运算符语法。其余钱包连接器未依赖该版本的pify包，因此不会触发报错，仅WalletConnect、WalletLink依赖的eth-json-rpc-filters会引入该版本的pify。

解决方案

方案1：强制锁定pify版本（无需修改构建配置，兼容性最好）
如果使用yarn作为包管理器，在package.json中新增resolutions字段：
```
"resolutions": {
  "pify": "3.0.0"
}
```
之后删除node_modules和yarn.lock，重新执行yarn install即可。
如果使用npm作为包管理器，在package.json中新增overrides字段：
```
"overrides": {
  "pify": "3.0.0"
}
```
之后删除node_modules和package-lock.json，重新执行npm install即可。
方案2：调整构建转译规则
执行yarn eject或npm run eject暴露webpack配置，修改babel-loader的include规则，将node_modules/pify加入转译范围，让babel处理其内部的新语法。
方案3：升级构建工具
废弃已停止维护的react-scripts-ts，切换为官方维护的react-scripts最新版本，或迁移至Vite等现代化构建工具，内置支持所有主流ES新语法。