ethers web3Modal Property 'providers' does not exist on type 'typeof import(...)'

Question

I am trying to add web3 wallet connect button onto my webpage but I am getting this error and I am not able to resolve it since a long time. It is a nextjs react application.

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}
              />
            )}
  );
};

Inside the connectWeb3Wallet function I get the following error -

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

The function above is almost identical to the readme of the package on npm - https://www.npmjs.com/package/web3modal?activeTab=readme

I am unable to understand why I am getting this error since providers is defined on ethers - https://docs.ethers.org/v4/cookbook-providers.html

Rosco

Answer 1

Just adding this here for anyone unwilling to downgrade to a previous version.

In the new ethers version(v6) some major changes have been made.

1. First off all the ethers.providers.* have been moved to ethers.*
2. Secondly, Web3Provider has been renamed to BrowserProvider

So to access the provider properly, the syntax should be as:

// v5
provider = new ethers.providers.Web3Provider(window.ethereum)

// v6:
provider = new ethers.BrowserProvider(window.ethereum)

Also, the method for broadcasting transactions to the network has changed: broadcasting transactions

// v5
provider.sendTransaction(signedTx)

// v6
provider.broadcastTransaction(signedTx)

Gotten from the v6 migration guide

Nannettenanni

Thank you, better option than downgrading :) – Substituent

Answer 2

They removed the providers keyword in the new version:

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

try it like so:

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

Karr

Ya thank you. I noticed that and downgraded ethers to a previous version – Rosco

Answer 3

You should use ethers.JsonRpcProvider(providerUrl) where providerUrl you can find on https://chainlist.org/.

btw if you didnt find ethers.utils(ethers.utils.formatEther), just use ethers.formatEther.

Butyrin