MetaMask Web3 Error: no synchronous methods without callback parameter

Question

I try to load the Metamask Web3 object into my nuxt.js frontend. On page load i encounter the following error:

Error: The MetaMask Web3 object does not support synchronous methods like eth_mining without a callback parameter. See https://github.com/MetaMask/faq/blob/master/DEVELOPERS.md#dizzy-all-async---think-of-metamask-as-a-light-client for details.
    at MetamaskInpageProvider.send (inpage.js:1)
    at RequestManager.webpackJsonp../node_modules/web3/lib/web3/requestmanager.js.RequestManager.send (requestmanager.js:58)
    at Eth.get [as mining] (property.js:107)
    at e (backend.js:1)
    at e (backend.js:1)
    at backend.js:1
    at Object.t.b (backend.js:1)
    at stringify (backend.js:1)
    at Object.e.on.e (backend.js:1)
    at Object.emit (<anonymous>:1:532)

Here is the relevant code:

export const state = () => ({
  contractInstance: null
})

export const mutations = {
  registerContractInstance (state, payload) {
    console.log('contract instance: ', payload)
    state.contractInstance = () => payload
  }
}

export const actions = {
  getContractInstance ({commit}) {
    getContract.then(result => {
      commit('registerContractInstance', result)
    }).catch(err => {
      console.log(err);
      ====================error catch in here(contract.js:27 )
    });
  }
}

getContract code:

let getContract = new Promise(function (resolve, reject) {
  if (typeof web3 !== 'undefined') {
    // Use MetaMask's provider
    web3 = new Web3(web3.currentProvider)
  } else {
    web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))
  }
  let contract = web3.eth.contract(abi)
  let contractInstance = contract.at(address)
  resolve(contractInstance)
})

export default getContract

my environment : "web3 ^0.20.0"

Answer 1

I had a similar problem and found this very helpful. https://github.com/ethereum/wiki/wiki/JavaScript-API#using-callbacks

web3.eth.getBlock(48, function(error, result){
    if(!error)
        console.log(JSON.stringify(result));
    else
        console.error(error);
})

Answer 2

You need to store your contractInstance as a function

Check out part 2 of my tutorial which uses VueJS: https://itnext.io/create-your-first-ethereum-dapp-with-web3-and-vue-js-part-2-52248a74d58a

check out getWeb3() and the registerWeb3 action and mutations.

It's pretty stupid so I use ethersjs now. Little less documentation but a way more readable API that works extremely well to work without metamask as it splits provider and wallet so that we only send signed transactions from our light client to a full node and never expose our privkey.