web3-react@^5.0.5使用ethers.js时ContractFactory不存在是否正常？

结论 #

这个情况完全正常，属于对web3-react返回值的理解偏差导致的问题。

原因说明 #

web3-react配置libraryName="ethers.js"后，useWeb3Context()返回的library字段仅为ethers的Provider实例（对应ethers.providers.Web3Provider类型），不是完整的ethers全局导出对象。Provider实例仅封装了和链交互的基础RPC方法，ContractFactory、utils、BigNumber等ethers的工具类/方法都没有挂载在Provider上，自然无法调用。

修复方案 #

1. 确保项目已经单独安装ethers依赖：npm install ethers 或者 yarn add ethers
2. 在需要用到对应工具的组件中，主动从ethers包导入所需模块即可
3. 如果需要签名发送交易/部署合约，从Provider中获取当前连接钱包的Signer实例即可

修正后的参考代码：

// 顶部导入ethers相关模块
import { ContractFactory } from 'ethers'

function SubComponent() {
  const web3 = useWeb3Context();

  function connect() { /* 连接MetaMask，运行正常 */ }

  async function deployContract() {
    // 1. 获取当前账户的Signer实例用于签名部署
    const signer = web3.library.getSigner()
    // 2. 用单独导入的ContractFactory实例化，第三个参数传入signer
    const factory = new ContractFactory(ABI, BINARY, signer);
    // 后续部署逻辑正常执行
    const contract = await factory.deploy(/* 构造函数参数 */)
    await contract.deployed()
  }

  return (/* ... */);
}

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