0

When I try to declare a web3 object It's always undefined.

I'm writting in JavaScript and using Infura as my provider for the ETH mainnet. I also tried with a local blockchain instead of Infura, but it also didn't work. I'm new to blockchain development and I'm kinda stuck on this. I know it must be something very small I'm missing, maybe I forgot to install something. I've also spent quite some time researching my problem, but I just can't seem to get it to work.

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://raw.githubusercontent.com/ethereum/web3.js/master/dist/web3.min.js"></script>
    </head>
    <script>
        const rpcURL = "https://rinkeby.infura.io/INFURA_PROJECT_ID";
        const address = 'MY_WALLET_ADDRESS';

        const web3 = new Web3(new Web3.providers.HttpProvider(rpcURL));

        web3.eth.getBalance(address, (err, wei) => {
            myBalance = web3.utils.fromWei(wei, 'ether')
            console.log(myBalance)
        })
    </script>
</html>
|improve this question
  • Could you please post the errors you get in console? – DamiToma Jun 15 at 12:51
  • web3 is undefined – RazerBoy Jun 29 at 21:28
0

I can see two problems here. First, you can't directly include raw files hosted on GitHub because of their CORB policies, but there's a workaround for this, just follow this steps. What you'll get in the end is this URL: https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js

Then, it's better to wait for the document to be fully loaded, because it might be that script will execute before Web3 is actually included.
You can use window.onload with pure Javascript, $(document).ready() with jQuery.

So the final script ends up being:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="description" content="">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
    </head>
    <script>
        $(document).ready(function() {
            const rpcURL = "https://rinkeby.infura.io/INFURA_PROJECT_ID";
            const address = 'MY_WALLET_ADDRESS';

            const web3 = new Web3(new Web3.providers.HttpProvider(rpcURL));

            web3.eth.getBalance(address, (err, wei) => {
                myBalance = web3.utils.fromWei(wei, 'ether')
                console.log(myBalance)
            })
        });
    </script>
</html>

Works fine.

|improve this answer
0

Thank you for your answer. This did indeed fix my problem with the web3 object being undefined and I marked you answer as correct. But I would still like to point one thing out.

The line myBalance = web3.utils.fromWei(wei, 'ether') will throw an error telling you that web3.utils is not imported. You can look at the below code for the fix.

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
    </head>

    <script>
        $(document).ready(function() {
            const rpcURL = "https://rinkeby.infura.io/MY_INFURA_PROJECT_ID";
            const address = 'MY_WALLET_ADDRESS';

            const web3 = new Web3(new Web3.providers.HttpProvider(rpcURL));

            web3.eth.getBalance(address, (err, wei) => {
                var balanceA = wei;
                balanceB = web3.toDecimal(balanceA);
                var balanceC = web3.fromWei(balanceB, 'ether');

                console.log("ding");

                console.log(balanceA);
                console.log(balanceB);
                console.log(balanceC);

                console.log("dong");
            })
        });
    </script>
</html>
|improve this answer
  • That's because you're using web3.fromWei while the correct method is web3.utils.fromWei. Try this out and let me know whether it works. – DamiToma Jun 27 at 23:13
  • I think you misunderstand. The above code does work. web3.utils.fromWei() doesn't work whereas web3.fromWei() does work. The problem is fixed now :), thank you again for you help. – RazerBoy Jun 29 at 21:27
  • That's because this CDN hosts version 0.20.6, I thought it was the latest. My bad. – DamiToma Jun 30 at 9:01

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.