Truffle and Web3.js – Compatibility of Version 1.0.0-beta

truffletruffle-contractweb3js

I'm trying to make the latest Truffle (3.4.3) and Web3 (1.0.0-beta11) to work together in a React app.

It fails when I try to call myContractInstance.deployed()

import { default as Eth} from 'web3-eth';
import { default as Contract } from 'truffle-contract';
import myContract_artifacts from '../../build/contracts/myContract.json';
...
var eth = new Eth(Eth.givenProvider || "http://localhost:8545");
var myContractDef = Contract(myContract_artifacts);
myContractDef.setProvider( eth.currentProvider);
var myContractInstance = await myContractDef.deployed();

the last line throws an error with localhost http provider (testrpc v4.0.1):

Uncaught (in promise) TypeError: Cannot read property 'apply' of undefined
at Provider.sendAsync (bundle.js:113598)
at RequestManager.sendAsync (bundle.js:121952)
at Object.get [as getNetwork] (bundle.js:23150)
at bundle.js:114052
at Promise (<anonymous>)
at Function.detectNetwork (bundle.js:114043)
at Function.deployed (bundle.js:113991)
at App.componentDidMount (bundle.js:60259)
at bundle.js:68136
at measureLifeCyclePerf (bundle.js:67947)
at bundle.js:68135
at CallbackQueue.notifyAll (bundle.js:39530)
at ReactReconcileTransaction.close (bundle.js:70093)
at ReactReconcileTransaction.closeAll (bundle.js:26044)
at ReactReconcileTransaction.perform (bundle.js:25991)
at batchedMountComponentIntoNode (bundle.js:41397)
at ReactDefaultBatchingStrategyTransaction.perform (bundle.js:25978)
at Object.batchedUpdates (bundle.js:69759)
at Object.batchedUpdates (bundle.js:13827)
at Object._renderNewRootComponent (bundle.js:41590)
at Object._renderSubtreeIntoContainer (bundle.js:41672)
at render (bundle.js:41693)

but also with Metamask (v3.9.0):

Uncaught (in promise) Error: MetamaskInpageProvider - sendAsync not overwritten
    at MetamaskInpageProvider.sendAsync (inpage.js:219)
    at Provider.sendAsync (bundle.js:113598)
    at RequestManager.sendAsync (bundle.js:121952)
    at Object.get [as getNetwork] (bundle.js:23150)
    at bundle.js:114052
    at Promise (<anonymous>)
    at Function.detectNetwork (bundle.js:114043)
    at Function.deployed (bundle.js:113991)
    at App.componentDidMount (bundle.js:60259)
    at bundle.js:68136
    at measureLifeCyclePerf (bundle.js:67947)
    at bundle.js:68135
    at CallbackQueue.notifyAll (bundle.js:39530)
    at ReactReconcileTransaction.close (bundle.js:70093)
    at ReactReconcileTransaction.closeAll (bundle.js:26044)
    at ReactReconcileTransaction.perform (bundle.js:25991)
    at batchedMountComponentIntoNode (bundle.js:41397)
    at ReactDefaultBatchingStrategyTransaction.perform (bundle.js:25978)
    at Object.batchedUpdates (bundle.js:69759)
    at Object.batchedUpdates (bundle.js:13827)
    at Object._renderNewRootComponent (bundle.js:41590)
    at Object._renderSubtreeIntoContainer (bundle.js:41672)

I've got the same errors when I try:

myContractDef.deployed().then( function( error, result)  { ... } )

Best Answer

I was able to make it work with recently released truffle-contract.

  • web3@1.0.0-beta.20
  • truffle-contract@3.0.0
  • truffle@3.4.9

Issues for me so far:

  • doesn't work with http provider: "TypeError: Cannot read property 'apply' of undefined" UPDATE: there is a workaround for this issue, check the comments on the issue linked
  • Page refresh in browser makes web3 functions to halt. Still investigating if it's an error in my code UPDATE: chrome update to Version 61.0.3163.91 solved this issue

A bit of work needed for migration, these what I've found so far:

  • util functions moved to web3.utils. Eg. fromWei, toWei, sha3 etc.
  • getBalance returns string now and not a BN
  • fromWei/toWei now returns string when bignumber.js bignumber passed (see issue )
  • web3.eth.filter removed, there is web3.eth.subscribe instead, bit of refactor required
  • accounts returned by web3.eth.getAccounts etc. are with checksum now (ie. upper/lower case used). See docs
Related Topic