Next.js项目集成Web3Modal报错：ethers无providers属性

你遇到的错误核心是Ethers.js版本不兼容：你参考的是Ethers v4文档，但实际安装的是v5或v6版本，这两个版本的模块结构、API命名有较大调整，导致ethers.providers属性不存在。

根据你项目中安装的Ethers版本，选择对应修复方式：

1. 确认Ethers版本 #

先查看项目根目录package.json里的ethers版本：

{
  "dependencies": {
    "ethers": "^6.x.x" // 或 ^5.x.x
  }
}

情况A：使用Ethers v6.x #

v6彻底重构了模块结构，移除了ethers.providers层级，同时部分API也有变更：

• 修改导入方式
• 替换已弃用的listAccounts() API

修复后的connectWeb3Wallet函数：

import { Web3Provider } from 'ethers'; // 直接导入Web3Provider

const connectWeb3Wallet = async () => {
  try {
    const instance = await web3Modal.connect();
    const provider = new Web3Provider(instance);
    // v6中通过signer获取账户地址，不再使用listAccounts
    const signer = provider.getSigner();
    const account = await signer.getAddress();
    const network = await provider.getNetwork();
    setConnectedAccount(account);
  } catch (error) {
    console.log(error);
  }
};

情况B：使用Ethers v5.x #

v5中ethers.providers仍存在，但需调整导入或使用方式：

方式1：直接导入providers模块 #

import { providers } from 'ethers';

const connectWeb3Wallet = async () => {
  try {
    const instance = await web3Modal.connect();
    const provider = new providers.Web3Provider(instance);
    const web3Accounts = await provider.listAccounts();
    const network = await provider.getNetwork();
    setConnectedAccount(web3Accounts[0]);
  } catch (error) {
    console.log(error);
  }
};

方式2：使用官方子包 #

先安装依赖：

npm install @ethersproject/providers

再导入使用：

import { Web3Provider } from '@ethersproject/providers';

const connectWeb3Wallet = async () => {
  try {
    const instance = await web3Modal.connect();
    const provider = new Web3Provider(instance);
    const web3Accounts = await provider.listAccounts();
    const network = await provider.getNetwork();
    setConnectedAccount(web3Accounts[0]);
  } catch (error) {
    console.log(error);
  }
};

你的useEffect未设置依赖数组，会导致组件每次渲染都重复创建Web3Modal实例，建议添加空数组确保仅初始化一次：

useEffect(() => {
  web3Modal = new Web3Modal({
    network: 'rinkeby',
    theme: 'light',
    cacheProvider: false,
    providerOptions: providerOptions,
  });
}, []); // 空依赖数组，仅在组件挂载时执行一次

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