2

I am following this tutorial here:

https://medium.com/@merunasgrincalaitis/the-ultimate-end-to-end-tutorial-to-create-and-deploy-a-fully-descentralized-dapp-in-ethereum-18f0cf6d7e0e

after running webpack I try to view the page but it returns a blank page.

When I check the developers console, I get the following error:

Uncaught ReferenceError: web3 is not defined at new App (build.js:10665) at constructClassInstance (build.js:19093) at updateClassComponent (build.js:20577) at beginWork (build.js:20963) at performUnitOfWork (build.js:22962) at workLoop (build.js:23026) at HTMLUnknownElement.callCallback (build.js:13280) at Object.invokeGuardedCallbackDev (build.js:13319) at invokeGuardedCallback (build.js:13176) at renderRoot (build.js:23104) build.js:22485 The above error occurred in the component: in App

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. logCapturedError @ build.js:22485 build.js:23732 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information. at Object.invokeGuardedCallbackDev (build.js:13326) at invokeGuardedCallback (build.js:13176) at renderRoot (build.js:23104) at performWorkOnRoot (build.js:23752) at performWork (build.js:23705) at requestWork (build.js:23616) at scheduleWorkImpl (build.js:23470) at scheduleWork (build.js:23427) at scheduleTopLevelUpdate (build.js:23931) at Object.updateContainer (build.js:23969)

This is strange as my index.js (the file from which I am building from ) has

import Web3 from 'web3'

I have even tried swapping for

Web3 = require('web3')

but to no avail.

These are the references to web3 in the js file:

import React from 'react'
import ReactDOM from 'react-dom'
import Web3 from 'web3'
import './../css/index.css'


class App extends React.Component {

    /*
    Constructor and set the initial state of the application
    */

    constructor(props){
        super(props)
        this.state = {
            lastWinner: 0,
            numberOfBets: 0,
            minimumBet: 0,
            totalBet: 0,
            maxAmountOfBets: 0,
        }

        /*
        Checking to see if Web3 variable we imported is defined or not
        */

        if(typeof web3 != 'undefined'){
            console.log("Using web3 detected from external source like Metamask")
            this.web3 = new Web3(web3.currentProvider)
        }else{
            this.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))
        }

What am I doing wrong?

  • Those statements bring in Web3 (uppercase). They won't define anything called web3 (lowercase). I do see code in that blog post that says web3.eth.contract(...). This should probably read this.web3.eth.contract(...) instead. But I'm not sure if that's where you're encountering the error. You might need to simplify your code down to a minimal repro and then share it. – smarx Dec 20 '17 at 20:53
  • @smarx to the rescue (again). Will cut out the web 3 references and post. Thank you – Samuel Dare Dec 20 '17 at 20:55
  • Reading through some more of the code, I think there are a number of web3 references that should actually be this.web3. (Those things probably work fine if you have MetaMask or another injector of web3 around, but without that, it's not going to be defined.) – smarx Dec 20 '17 at 20:56
  • I am using metamask though? – Samuel Dare Dec 20 '17 at 20:56
  • 1
    I'm not sure, but I suspect that you'll need to run index.html from a web server, even if it's just a local one. (I'm personally a fan of livereload.) – smarx Dec 20 '17 at 21:14
1

Try it this way:

import React, { Component } from 'react';
import web3 from './web3';

class App extends Component {
  state = { lastWinner: 0, numberOfBets: 0, minimumBet: 0, totalBet: 0, maxAmountOfBets: 0 };

  async componentDidMount() {
    const lastWinner = await blackjack.methods.lastWinner().call();
    const numberOfBets = await blackjack.methods.getNumberOfBets().call();

    this.setState({ lastWinner, numberOfBets });
  }

I would create a separate file to house all configuration code around the web3 library that would look like this:

import Web3 from 'web3';

const web3 = new Web3(window.web3.currentProvider);

export default web3;

Now, I utilized ES2016 way of initializing state where you no longer need the constructor() function.

You want to setup your own local instance of web3 and rip out the provider from the injected copy that is coming from Metamask and this will allow your instance of web3 to automatically connect to the Rinkeby test network and make use of all the accounts assigned to the Metamask extension.

So I created a new instance of web3 and simultaneously ripped out the injected copy of web3 provided by metamask. To rip out the provider is where you see the reference to window global variable.

Metamask injects web3 onto web3 global variable. The currentProvider has been pre configured for the Rinkeby test network.

You can then import it to the App file as I displayed above and then console it out to ensure it works like so:

import React, { Component } from 'react';
import web3 from './web3';

class App extends Component {
  state = { lastWinner: 0, numberOfBets: 0, minimumBet: 0, totalBet: 0, maxAmountOfBets: 0 };

  async componentDidMount() {
    const lastWinner = await blackjack.methods.lastWinner().call();
    const numberOfBets = await blackjack.methods.getNumberOfBets().call();

    this.setState({ lastWinner, numberOfBets });
  }

  render() {
    console.log(web3.version);
  }

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.