ethers web3Modal 属性“providers”在类型“typeof import(...)”上不存在

Question

我正在尝试将 web3 钱包连接按钮添加到我的网页上，但我收到此错误，并且很长一段时间以来我无法解决它。这是一个 nextjs React 应用程序。

const InvitesPage: NextPage = () => {
  let web3Modal: any;
  useEffect(() => {
    web3Modal = new Web3Modal({
      network: 'rinkeby',
      theme: 'light', // optional, 'dark' / 'light',
      cacheProvider: false, // optional
      providerOptions: providerOptions, // required
    });
  });

  const classes = useStyles();
  const { themeStretch } = useSettings();

  const [connectedAccount, setConnectedAccount] = useState('');

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

  const disconnectWeb3Modal = async () => {
    await web3Modal.clearCachedProvider();
    setConnectedAccount('');
  };

return (
 {!connectedAccount ? (
              <ConnectIdentity
                connectionType="Connect Wallet"
                connected={false}
                icon="eva:wallet-fill"
                onClick={connectWeb3Wallet}
              />
            ) : (
              <ConnectIdentity
                connectionType="Disconnect Wallet"
                connected={false}
                icon="eva:wallet-fill"
                onClick={disconnectWeb3Modal}
              />
            )}
  );
};

在

connectWeb3Wallet

函数内，我收到以下错误 -

Property 'providers' does not exist on type 'typeof import("/Users/encrypted_soul/code/..../node_modules/ethers/types/ethers")'.ts(2339)

上面的功能与 npm 上的包的自述文件几乎相同 - https://www.npmjs.com/package/web3modal?activeTab=readme

我无法理解为什么会收到此错误，因为提供商是在以太坊上定义的 - https://docs.ethers.org/v4/cookbook-providers.html

Answer 1

只是将其添加到此处，以供那些不愿意降级到以前版本的人使用。

在新的以太版本（v6）中进行了一些重大更改。

1. 首先，所有 ethers.providers.* 已转移到 ethers。*
2. 其次，Web3Provider 已更名为 BrowserProvider

因此，要正确访问提供程序，语法应如下所示：

// v5
提供者 = 新 ethers.providers.Web3Provider(window.ethereum)

// v6:
提供商 = 新的 ethers.BrowserProvider(window.ethereum)

此外，向网络广播交易的方法有 更改：广播交易

// v5
提供商.sendTransaction(signedTx)

// v6
提供者.broadcastTransaction(signedTx)

取自 v6 迁移指南

Answer 2

他们在新版本中删除了providers关键字：

https://docs.ethers.org/v6/migration/#migrate-providers

像这样尝试一下：

const provider = new ethers.Web3Provider("...");

Answer 3

您应该使用

ethers.JsonRpcProvider(providerUrl)

，您可以在https://chainlist.org/找到providerUrl。

顺便说一句，如果你没有找到 ethers.utils(ethers.utils.formatEther)，只需使用 ethers.formatEther。