2

I am receiving a "not defined" error when trying to access the web3 object in Chrome terminal. My current setup:

  • running testrpc
  • web3 object successfully instantiated in App.js
  • built app using React
  • using Chrome incognito window

I would like to be able to access my contract through the Chrome terminal but when I try to set the web3 variable in terminal here:

var web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));

I receive the error Uncaught ReferenceError: Web3 is not defined in Chrome console.

In my App.js file, I have the following: import Web3 from 'web3';. When I set the variable in App.js, console.log(web3) outputs the object correctly. When I try to add import Web3 from 'web3'; in Chrome terminal, I get the error Uncaught SyntaxError: Unexpected token import.

After doing a little research it looks like I might need to use require and Browserify to use the web3 library correctly in Chrome terminal. Are there other ways to use the web3js in React in Chrome terminal using my current setup?

3

3 Answers 3

1

In order to use web3 in the Chrome console:

  1. Go to a "real" web page, for example www.google.com
  2. In the developer tools/console enter:
ethereum.enable()
  1. In the metamask popup press Connect
  2. In the developer tools/console enter the command below to see you can access the web3 object, which is inserted by metamask.
web3.version

If you want to use a newer version of web3.js: this example uses browserify:
problem connecting web3 v 1.2.1 with metamask : 'currentProvider' of undefined

0

As outlined here import is not currently supported fully in the browser.

To answer this definitively one would need to know exactly how you are creating, and building your product.

Browserify essentially resolves module imports and exposes the raw Javascript such that it can be used in the browser.

You get the error Uncaught ReferenceError: Web3 is not defined because the module is not resolved to Javascript.

When running your app and receiving an output for console.log(web3), I suspect you are running in a node based environment which does resolve the import for you.

Essentially, in the browser your import is not resolved.

If you do use browserify to make your Javascript run in the browser, you also need to make sure to expose your variable in the global scope such that it can be accessed from the console.

EDIT The easiest way to use web3.js in the browser is just to download the source code and include it in your page with script tags.

3
  • Thanks Thomas, I am indeed running a node-based environment (forgot to mention this in my setup as I followed the Truffle installation instructions). Is there a standard way to get the web3 module resolved in the Chrome terminal?
    – atc
    Aug 22, 2017 at 2:49
  • The easiest way is just to include the source code in a script tag. See edit. Aug 22, 2017 at 11:24
  • Just to follow up on this, I found that running my app in Chrome incognito prevents Chrome extensions from running. With Metamask web3 is automatically injected into the javascript context and you can access the web3 API this way.
    – atc
    Aug 22, 2017 at 15:58
0

The problem is that the default scope is 'window' and your web3-instance is not set there. This is why your chrome-terminal does not find it. In your react-code you could set window.Web3=Web3; and then your terminal-code works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.