Ethers.js provider error: non-configurable property '"provider"'

Question

I'm using Metamask detect ethereum provider, and while the app is starting, I'm trying to create ethers signer and provider objects and store them in Vue Pinia store. However, when I use the stored signer, I encounter the error:

TypeError: proxy must report the same value for the non-writable, non-configurable property '"provider"'

 const provider = await detectEthereumProvider();
 if (provider) {
   useEthersStore().setProviderSigner()
   startApp(provider)
 }

async setProviderAndSigner() {
     if (window.ethereum) {
         this.provider = new ethers.providers.Web3Provider(window.ethereum);
         this.signer = this.provider.getSigner();
     } 
}

I'm also wondering what the best approach is to handle ethers provider and signer, without having to define them every time they are needed.

Answer 1

Your error come from the Vue reactivity system it can cause issues with certain libraries or objects, like the ethers.js provider and signer

To fix that, first be sure sure you are using the latest ethers.js and Pinia then instead of storing the provider and signer directly in the Pinia you should store them in non-reactive way using markRaw like that:

import { markRaw } from 'vue';

async setProviderAndSigner() {
  if (window.ethereum) {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();

    this.provider = markRaw(provider);
    this.signer = markRaw(signer);
  }
}