TypeError whenever I try to interact with Contract events

[SloppyFresh]

index.ts?ae0a:934 Uncaught (in promise) TypeError: 'get' on proxy: property 'interface' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Interface>' but got '#<Interface>')
at Proxy._getRunningEvent

I am getting this error whenever I try to call event-related functions on a contract, such as
contract.listenerCount('UpdatedMessages')
or
contract.on('UpdatedMessages', ()=>{ ... })

Any ideas? It is a contract on the Polygon test net.

[ricmoo]

Can you include the abi and contract address with a snippet of code?

Ethers doesn’t use Proxy in v5, so that seems weird. What backend are you using? Infura? MM?

[ricmoo]

Are you using hardhat or another library that may be wrapping things in a proxy? Are you using a proxy for any of your objects?

[SloppyFresh]

Ahh I did deploy the smart contract using hardhat... that may be the case. I may have some reading to do... Thank you for pointing me in the right direction! But, in the code I am running to interact with the smart contract, I am only using ethers....

[SloppyFresh]

Instead of subscribing with a signer, I needed to subscribe with a provider. Maybe the proxy portion of my error message is caused by vue? Thanks for the time though, I really appreciate it.

[SloppyFresh]

Ok, the REAL problem was using your contract object within a Vue "reactive" object. No more of that, no more errors. :)

[p0rridg3]

Hey @SloppyFresh - I think I am having the exact same issue as you... How did you go about solving this? Thanks

context:

• I've got a local hardhat node
• deployed my contract there
• i have a small Vue app
• i am trying to subscribe to events with contract.on('MyEvent', f => ...)

[SloppyFresh]

Put the contract (and any other ethers objects you need to store) into a non-Vue object. The extra stuff Vue does to make data update everywhere automatically doesn't seem to play well with ethers.

I had the contract in a simple Vue3 store, which was causing the issue. I moved the contract out of the store, and it works fine now.

export const store = reactive({ provider: null, someData:null, .... });

became

let provider = null; export const store = reactive({ someData:null, .... });

I think that if you're storing the contract in a view / component, you'll need to move it into a js file that you import into the component.

[p0rridg3]

That is very interesting, I'll give it a go.

Thanks a lot @SloppyFresh much appreciated :)

[p0rridg3]

Just wanted to add a little bit more info to someone that may be struggling with this as well.

In Vue (as of Apr 2022), primitives / objects / etc in your data() & computed() methods, are turned into "reactive" objects. This is a way for Vue to keep track of changes in your data. Have a look at the Vue docs for more info.

Essentially, Vue will loop through the object returned in data() and will turn it into a reactive object. You can stop this behaviour with Object.freeze(). For instance:

data() {
  num: Object.freeze(69),
  something: Object.freeze(new Something())
}

Abdelrahman Anwad has a vey insightful blog post on this. Worth a read as he goes into details on "deep reactivity".

However, the way I've structured my application, I need to have the contract on my state. Luckily, the Contract Connection code lives under the same component. So I added an extra subscribeToEvents/1 method that takes in as a parameter a "pure" javascript object and subscribes to events. Here's an example:

connectToContract() {
  const contract = new ethers.Contract(config.contractAddr, Contract.abi, provider.getSigner())  // at this point the object is still "pure"
  this.raptrContract = contract // now i am storing it to my data which automatically becomes "reactive"

  this.subscribeToContractEvents(contract)
},
subscribeToContractEvents(contract) {
  contract.on("MyEvent", f => console.log(f))
}

Hope this helps! :)