Property 'on' does not exist on type 'ExternalProvider'.

[MCarlomagno]

Ethers Version

5.4.7

Search Terms

provider, window, ethereum, stream

Describe the Problem

When I setup the typed provider provided by ethers library, I have an error when I try to setup the event callbacks.

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

declare global {
  interface Window {
    ethereum: ExternalProvider;
  }
}

const someFunction = () => {

  const setupProvider = () => {
    const provider = new Web3Provider(window.ethereum);

    provider.on('accountsChanged', (acc: string[]) => {
      // do something
    });

    // the error also happens here
    provider.provider.on('networkChanged', (net: number) => {
      // do something
    });

  }
}

Code Snippet

No response

Contract ABI

No response

Errors

The error is basically a type error

Property 'on' does not exist on type 'ExternalProvider'.

Environment

node.js (v12 or newer)

Environment (Other)

React

[ricmoo]

The ExternalProvider interface does not have a .on; it’s intended as a way to interact with EIP-1193 and Web3.js provider objects. The `.on' is specific to ethers providers; they may exist on others but ethers cannot guarantee the interface of other providers.

[ricmoo]

I think I’m confused. All (ethers) providers have a .on exported, since they implement the Provider interface.

[MCarlomagno]

Sorry I made a little mistake in the workaround example, the last line was (window.ethereum as EthersProvider).on....

Anyways...
In a nutshell, the provider.on function using the Web3Provider does not work and using window.ethereum.on(.. it does, in addition I had to add the as EthersProvider to avoid typing errors.

[ricmoo]

window.ethereum isn’t an ethers provider though. It is completely in related to ethers; so at best is should probably be used as { on: (e: string, l: () => void }. The window.ethereum is usual an EIP-1193 provider these days, so you would want a Type for that; but that isn’t part of ethers.

The provider.on should work. I use it all the time…

[ricmoo]

(the ExternalProvider is a”lowest common denominator” for what will work with the Web3Provider)

[MCarlomagno]

The provider.on is not working for me, bur I think I should give another try, that's beyond this conversation.

I understand better the scope of the providers now, thanks so much for the patience during this discussion 😊

keep the great work!