Web3 not defined

Question

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?

Answer 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);
  }