Can't listen events with ethers.js, metamask and vue

Question

I don't understand how to get events with ethers v6, I tried in this way:

if (window.ethereum == null) {
  console.log("Metamask is not installed; using read-only defaults");
  const provider = ethers.getDefaultProvider();
  // ...
} else {
  const provider = new ethers.BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();
  const abi = BiteIDNFT_abi;
  const contractNFT = new ethers.Contract("contractaddress", abi, signer);

  await contractNFT.safeMint("contractaddress", "ipfs://test");

  contractNFT.on("*", (from, to, tokenId, event) => {
    console.log(`${ from } => ${ to }: ${ tokenId }`)

      // Optionally, convenience method to stop listening
      event.removeListener();
  });
}

The nft was correctly minted on the blockchain with the correct Transfer event.

But on the browser console I get this [object Object] => undefined: undefined

Any tips?

Answer 1

I report the answer of ricmoo that you could find here.

You can’t destruct events that are emitted from "*", since every event has a potentially different signature. So you only get the Event payload, that object you are getting.

So it should look like provider.on("*", (log, evt) => { console.log(log); }).

Answer 2

Have a look at this topic: EthersJS Listening to events with NodeJS Strange Errors

Essentially it might not be your fault, but a bug related to the v6 beta. Try downgrading ethers.js as described in the topic above.

Also one thing to note, you can use contractNFT.once instead of contractNFT.on and then removing the event listener. The first is more memory effective and closes the listener automatically after one captured event.