1

I faced Uncaught (in promise) DOMException error like below when I was developing Nuxt web app with Metamask(chrome) and truffle Ganache.

Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': function (error, response) {
              _this2.removeAllListeners(payload.id);
              if (!error) {
 ...<omitted>... } could not be cloned.

What I tried to do is send transactions to local blockchain(Ganache).

    async sendTransaction(obj) {
      const web3 = await getWeb3();
      // get account
      const accounts = await web3.eth.getAccounts();
      const roomFactory = await getRoomFactory();

      // *ERROR OCCURS HERE*
      const result = await roomFactory.methods
        .createNewRoom(obj._roomId)
        .send({ from: accounts[0] });
      console.log("result", result);
    },

function getWeb3() and getRoomFactory() are following:

// getWeb()

const getWeb3 = () =>
  new Promise(async (resolve, reject) => {
    // Modern dapp browsers...
    if (window.ethereum) {
      const web3 = new Web3(window.ethereum);
      try {
        // Request account access if needed
        await window.ethereum.enable();
        // Acccounts now exposed
        resolve(web3);
      } catch (error) {
        reject(error);
      }
    }
    // Legacy dapp browsers...
    else if (window.web3) {
      try {
        // Use Mist/MetaMask's provider.
        const web3 = new Web3(window.web3.currentProvider);
        console.log("Injected web3 detected.");
        resolve(web3);
      } catch (error) {
        reject(error);
      }
    }
    // Fallback to localhost; use dev console port by default...
    else {
      try {
        const provider = new Web3.providers.HttpProvider(
          "http://127.0.0.1:8545"
        );
        const web3 = new Web3(provider);
        console.log("No web3 instance injected, using Local web3.");
        resolve(web3);
      } catch (error) {
        reject(error);
      }
    }
  });
import getWeb3 from "~/plugins/web3.js";
import RoomFactory from "./build/contracts/RoomFactory.json"; // which is build by truffle

const getRoomFactory = async () => {
  const web3 = await getWeb3();

  const abi = RoomFactory.abi;
  const networks = RoomFactory.networks["5781"];
  return web3.eth.Contract(abi, networks.address);
};

What I can do:

  • get accounts (web3.eth.getAccounts()) from metamask provider
  • get balance (web3.eth.getBalance(accounts[0]))

What I cannot do:

  • send transaction to other contracts (Mycontract.methods.myfunction().send())
  • call (Mycontract.methods.myfunction().call())

screenshot_1

Versions:

  • Web3: 1.0.0-beta.36
  • Metamask: 5.3.2
  • truffle: 5.0.1

Similar problem is on the issue of metamask-extension.

I'd appreciate it if you could help me with some tips. Thank you.

  • I have the same issue with beta46 & 47. Have you tried it with those? – szerte Mar 4 at 15:13
  • @szerte I haven't. In my case, just beta37 works fine... – Yuki Mar 5 at 3:34
1

I got the same error using 1.0.0-beta.37 (sometimes). Meaning, I replicated the application in another directory. Did not copy the node-modules either in server side or the client site (It is MERN with DApp). I regenerated them using >> npm install (to replicate what's happening in heroku)

In the original case, it works (still does). In the new directory (replicated app). .. it throws the error above. I am associating it with npm install doing something differently.

  • Are you sure that you installed modules with exact same versions? npm install does not install exact versions depending on how you installed modules. Please check here for details – Yuki Mar 5 at 3:28
-1

I solved this problem by installing 1.0.0-beta.37.

  • Why would you vote this down? I'm having this exact issue. – M H Feb 6 at 19:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.