Web3.givenProvider returns null

Question

I'm creating a react-app that interacts with an ethereum private blockchain running with geth on rpcport 8545.

I am thus using web3.js to fetch data on my blockchain, and here's my code:

var Web3 = require('web3');
var web3 = new Web3("http://localhost:8545");

and in the render() method:

console.log(web3.eth.blockNumber);
console.log(Web3.givenProvider);

It should display in the browser console my current blockNumber and on which port I'm listening, but instead I get undefined and null, which seems to mean that I'm not connected to my running blockchain.

btw my blockchain is running with this line:

geth --datadir ./noeud2 --networkid 100 --port 30301 --rpcport 8545

Do you know why this isn't working?

I have been following this tutorial:

https://www.codeooze.com/blockchain/ethereum-block-explorer-react-02/

But it does not work for me either.

score 1 · Answer 1 · answered Nov 12 '18 at 12:22

1

The initialization of web3 should be like this: var web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));

answered Nov 12 '18 at 12:22

nikos fotiadis

1,040
2
8
16

Are you sure that your code executes in the browser? The documentation notes that it will be set `in an Ethereum compatible browser`. Or is it not initialized at all? In which case you can try debugging it to be sure about what happens. – nikos fotiadis Nov 12 '18 at 12:32
I'm not a react specialist so I don't really know if the code executes in the browser or not, i'll follow your advice and debug it! Thanks – Bud Nov 12 '18 at 12:40
Try not to have in the render function. If you want it to execute in the browser put the code in a separate script file and the include it to your html. – nikos fotiadis Nov 12 '18 at 12:46

Joseph T F · Accepted Answer · 2018-11-13T06:53:03.343

Before directly getting into debugging your react code, it is better to start with a simple html based application and try to query your private Ethereum chain. For that follow the below steps

Create the below index.html file

index.html

<!DOCTYPE html>
<html lang=”en”>
<head>
     <meta charset=”UTF-8">
     <meta name=”viewport” content=”width=device-width, initial-scale=1.0">
     <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
     <title>Document</title>
     //provide the location of web3 file
     <script src=”./node_modules/web3/dist/web3.min.js”></script>

</head>
<body>
    <div class=”container”>
         <h1>Given below Ethereum address</h1>
         <div id=”AccountAddress”></div>

<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script>


  if (typeof web3 !== ‘undefined’) 
{
 web3 = new Web3(web3.currentProvider);
 } 
else 
{
 // set the provider you want from Web3.providers
web3 = new Web3(new Web3.providers.HttpProvider(“http://localhost:8545”));
 }

 $(“#AccountAddress”).html(web3.eth.accounts[0]);

 </script>
</body>
</html>

When you open the index.html file in browser, if the first account address is not getting displayed then it is having problem with connecting to the geth ethereum blockchain you have just spinned off.

With Geth you can try with the below configuration to start your Ethereum

geth --rpc --rpcaddr "0.0.0.0" --rpcport 8545 --nodiscover --networkid "$NETWORKID" --datadir ~/.ethereum_experiment --genesis ~/genesis_block.json

Or else, you can try using Ganache CLI (TestRPC) instead of Geth as well

Ganache CLI can be installed using the following command

npm install -g ganache-cli

Once finished, run the following command to start it:

ganache-cli

You can also try the following as well if you feel you don't have the web3

Install web3.js using the following command

npm install ethereum/web3.js — save

Now you can try connecting to the Ganache CLI you just started by using the Remix IDE first.

Open http://remix.ethereum.org, click on the Run tab, and then change the Environment drop-down from Javascript VM to Web3 Provider.

Hit “OK” and then specify the testrpc/ganache-cli localhost address (by default, it’s http://localhost:8545)

Now instead of deploying and testing in the Javascript VM in the Remix, we’re now using the Ganache CLI client on your computer.

Try with the above steps first and comment back with your outputs.

Hi! I have tried with your html code, it doesn't work either, even with your configuration start. In fact I have to implement my code with Geth, it's part of my project. — Bud, Nov 13 '18 at 10:49
Anyway, thanks a lot, I think I managed to bypass the problem using first a python script that communicates with my blockchain and then send some data to a js program with Sockets, may be a little complex for what it's actually doing, but it will be fine for a first version! Again, thank you! — Bud, Nov 13 '18 at 10:52

Web3.givenProvider returns null

2 Answers2