0

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?

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.

  • 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 '17 at 2:49
  • The easiest way is just to include the source code in a script tag. See edit. – Thomas Clowes Aug 22 '17 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 '17 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 acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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