search

adrianmcli / truffle-next

🛰️ A boilerplate Truffle Box project with Next.js for rapid Ethereum Dapp development
192 stars 50 forks source link

no web3 connection #37

Closed SvenMeyer closed 6 years ago

SvenMeyer commented 6 years ago

I developed an application based on this truffle box. I installed web3@1.0.0-beta.35 within the client directory and otherwise followed the instruction here for the blank box. That works. (as far as I can remember only with truffle develop on port 9545, not on any ganache version). But even with an identical getWeb3.js I can't get my application (back) to work. I tried truffle develop , Ganache-cli, Ganache GUI, with Chrome + MetaMask 4.9.3 ... and I have no clue how to debug this. I grabbed some messages from the Chromium Develoer console, no idea if that gives any indication to anybody ...

HMR] bundle rebuilding
client.js:222 [HMR] bundle rebuilt in 225ms
process-update.js:27 [HMR] Checking for updates on the server...
process-update.js:98 [HMR] Nothing hot updated.
process-update.js:107 [HMR] App is up to date.
Web3Container.js:19 TypeError: Cannot read property 'getId' of undefined
    at _callee$ (getContract.js:1)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:296)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:3000/_next/static/commons/main.js:30257:21)
    at step (SimpleStorage.json:1)
    at _next (SimpleStorage.json:1)
    at SimpleStorage.json:1
    at new Promise (<anonymous>)
    at SimpleStorage.json:1
    at getContractInstance (getContract.js:1)
property.js:119 Uncaught TypeError: callback is not a function
    at property.js:119
    at requestmanager.js:89
    at inpage.js:1
    at inpage.js:1
    at i (inpage.js:1)
    at inpage.js:1
    at inpage.js:1
    at u (inpage.js:1)
    at s (inpage.js:1)
    at inpage.js:1
web3.version
{api: "0.20.7", getNode: ƒ, getNetwork: ƒ, …}
client.js:214 [HMR] bundle rebuilding
client.js:222 [HMR] bundle rebuilt in 134ms
process-update.js:27 [HMR] Checking for updates on the server...
process-update.js:98 [HMR] Nothing hot updated.
process-update.js:107 [HMR] App is up to date.

web3.eth.net
undefined
web3.eth
Eth {_requestManager: RequestManager, getBalance: ƒ, getStorageAt: ƒ, getCode: ƒ, getBlock: ƒ, …}

Any help highly appreciated !

SvenMeyer commented 6 years ago

Just added console.log to check the version within getWeb3.js

import Web3 from 'web3'

const resolveWeb3 = (resolve) => {
  let { web3 } = window

  const alreadyInjected = typeof web3 !== 'undefined' // i.e. Mist/Metamask
  const localProvider = `http://localhost:9545`

  if (alreadyInjected) {
    console.log(`Injected web3 detected.`)
    console.log('web.version =', web3.version)
    web3 = new Web3(web3.currentProvider)
  } else {
    console.log(`No web3 instance injected, using Local web3.`)
    const provider = new Web3.providers.HttpProvider(localProvider)
    web3 = new Web3(provider)
  }
  console.log('web.version =', web3.version)

  resolve(web3)
}

Result >>>

[HMR] connected
getWeb3.js:10 Injected web3 detected.
getWeb3.js:11 web.version = {api: "0.20.3", getNode: ƒ, getNetwork: ƒ, …}
getWeb3.js:18 web.version = 1.0.0-beta.35
Web3Container.js:19 TypeError: Cannot read property 'address' of undefined
    at _callee$ (getContract.js:4)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:296)
    at Generator.prototype.(:3000/anonymous function) [as next] (http://localhost:3000/_next/static/commons/main.js:30258:21)
    at step (ERC721Vehicle.json:1)
    at _next (ERC721Vehicle.json:1)
adrianmcli commented 6 years ago

Seems like it's not getting the correct network ID? Have a look at this: https://github.com/adrianmcli/truffle-next/blob/master/client/lib/getContract.js#L3-L4

SvenMeyer commented 6 years ago

Actually I already use this = your code. I ended up doing the truffle unbox again, merged my code back in and somehow it solved the problem. Now I just can't get my contract calls to works, although they look the same as your example store/get.

newVehicleToken = async () => {
    const { accounts, contract } = this.props
    const model = 'Porsche Cayenne'
    const vin = 'WP1AB29P64LA63732'
    const ein = 'AFD'
    const tokenId = await contract.methods.mintNewVehicleToken(
      web3.utils.utf8ToHex(model), 
      web3.utils.utf8ToHex(vin), 
      web3.utils.utf8ToHex(ein)).send({ from: accounts[0] })
    this.setState({ lastTokenId: tokenId })
  };

  getVehicleData = async () => {
    const tokenId = 1;
    const { accounts, contract } = this.props
    const response = await contract.methods.getVehicleData(tokenId).call({ from: accounts[0] })
    console.log('getVehicleData(1) : response =', response)
    this.setState({ model: response[0], vin: response[1], ein: response[2] })
    console.log('model =', this.state.model)
  };

newVehicleToken comes back with a strange error

errors.js:29 Uncaught (in promise) Error: Returned error: Error: Error: [ethjs-rpc] rpc error with payload {"id":5221641951666,"jsonrpc":"2.0","params":["0xf901ad0e8504a817c800836170d494345ca3e014aaf5dca488057592ee47305d9b3e1080b9014430cfb0a9000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000a0000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000000203078353036663732373336333638363532303433363137393635366536653635000000000000000000000000000000000000000000000000000000000000002430783537353033313431343233323339353033363334346334313336333333373333333200000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000830783431343634340000000000000000000000000000000000000000000000008222e2a078cc9442953defaf17b42b506dbf267c3f0a0ba41be399668fcf6438cc5bf543a05576e00d798e479738dd26cde1e8238a111289b5838a23ec1e7949ad05f2f7b9"],"method":"eth_sendRawTransaction"} Error: VM Exception while processing transaction: revert
    at Object.ErrorResponse (errors.js:29)
    at index.js:140
    at inpage.js:1
    at inpage.js:1
    at i (inpage.js:1)
    at inpage.js:1
    at inpage.js:1
    at u (inpage.js:1)
    at s (inpage.js:1)
    at inpage.js:1
ErrorResponse @ errors.js:29
(anonymous) @ index.js:140
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:1
i @ inpage.js:1
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:1
u @ inpage.js:1
s @ inpage.js:1
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:1
u @ inpage.js:1
s @ inpage.js:1
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:1
u @ inpage.js:1
(anonymous) @ inpage.js:1
He @ inpage.js:1
(anonymous) @ inpage.js:1
value @ inpage.js:1
(anonymous) @ inpage.js:1
n @ inpage.js:1
i @ inpage.js:1
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:1
n @ inpage.js:1
i @ inpage.js:1
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:1
u @ inpage.js:1
s @ inpage.js:1
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:1
Promise.then (async)
step @ 6.855d9f7f66e26aa81ee5.hot-update.js:20
_next @ 6.855d9f7f66e26aa81ee5.hot-update.js:20
(anonymous) @ 6.855d9f7f66e26aa81ee5.hot-update.js:20
(anonymous) @ 6.855d9f7f66e26aa81ee5.hot-update.js:20
value @ dapp.js:35
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
executeDispatch @ react-dom.development.js:461
executeDispatchesInOrder @ react-dom.development.js:483
executeDispatchesAndRelease @ react-dom.development.js:581
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:592
forEachAccumulated @ react-dom.development.js:562
runEventsInBatch @ react-dom.development.js:723
runExtractedEventsInBatch @ react-dom.development.js:732
handleTopLevel @ react-dom.development.js:4476
batchedUpdates$1 @ react-dom.development.js:16659
batchedUpdates @ react-dom.development.js:2131
dispatchEvent @ react-dom.development.js:4555
interactiveUpdates$1 @ react-dom.development.js:16714
interactiveUpdates @ react-dom.development.js:2150
dispatchInteractiveEvent @ react-dom.development.js:4532

2nd get.. likely does not work for same reason or because their is no data yet.

Just in case if you have some time to look at the full picture ... https://github.com/SvenMeyer/VehicleHistoryLog

adrianmcli commented 6 years ago

I'm not sure about that, it might have something to do with your gasLimit? Either way, I think that's more of an application specific bug, so I think I'll close this issue now.