JS code working when ran in a node context but Uncaught ReferenceError in console

Question

I am just working my way through this tutorial: https://ethereum.org/en/developers/tutorials/getting-started-with-ethereum-development-using-alchemy/

Npm dependencies installed without any issues and here is the code I am trying to run:

const { createAlchemyWeb3 } = require("@alch/alchemy-web3");
const web3 = createAlchemyWeb3(
    "https://eth-mainnet.alchemyapi.io/v2/1aZ1ZWH9087FqTnSSr7TI8ACFFgsIbcF"
)

async function main() {
    const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
    const web3 = createAlchemyWeb3("https://eth-mainnet.alchemyapi.io/v2/1aZ1ZWH9087FqTnSSr7TI8ACFFgsIbcF")
    const blockNumber = await web3.eth.getBlockNumber()
    console.log("My first exercise! The latest block number is " + blockNumber)
}
main()

When loading it in the browser, I get Uncaught ReferenceError but when running the script file in command line using node, all works as expected.

What would be causing this? TIA :)

Could you share the error output here? My hunch is the Uncaught ReferenceError is on `createAlchemyWeb3`... — Alexander Nied, Jul 22 '21 at 13:32
Yes, you're right, it is! Do you have any idea why that may be? Is it a web3 issue? I had a few of these in the past... — krzyzws, Jul 22 '21 at 13:51
How are you running this in the browser? Are you using something like Webpack to handle the `require()`? — slebetman, Jul 22 '21 at 15:13
Depends on how you're running it in the browser, but if you're not using a bundler to package and wire the code, it is likely that it doesn't have a way to resolve that `require` path from the browser code. — Alexander Nied, Jul 22 '21 at 15:20

score 0 · Accepted Answer · answered Jul 22 '21 at 16:14

After looking at the tutorial link I'm fairly confident that the code you have is not meant for the browser. What you have is code for node.js. Specifically, the browser does not understand require().

It is possible to make what you wrote work on the browser if you use something like Webpack or Browserify - these are javascript compilers that compiles javascript to javascript. That may look weird at first, if you are writing javascript then why would you want to compile it to javascript? Well, one of the things they allow you to do is to use some features that your browser may not support, for example require() or new proposed language features.

However, I'm not going down that path. Instead I would like to encourage you to read the alchemy-web3 documentation because I think that's an important skill to learn for javascript developers.

If you google "alchemy-web3" one of the top results would be it's github page: https://github.com/alchemyplatform/alchemy-web3. Go to the github page and have a quick read. Alternatively (and I do this more often than google) you can go to https://www.npmjs.com/ and search for "alchemy-web3". You will get this page: https://www.npmjs.com/package/@alch/alchemy-web3

They're both the same page but npmjs will not give results that are not javascript libraries. If you glance at the alchemy-web3 page you will see some examples for how to use it. This is why I think learning to find and read library documentation is an important skill for a javascript programmer - because unlike most other languages most javascript libraries tend to have good handwritten documentation.

If you read the documentation you will see how to use it in a browser. Instead of doing a require() you include the alchemy-web3 library in a script tag:

<!DOCTYPE html>
<!-- Name this file something like Testing.html: -->

<!-- In HTML we do this instead of require() -->
<script src="https://cdn.jsdelivr.net/npm/@alch/alchemy-web3@latest/dist/alchemyWeb3.min.js"></script>

<script>
    // Now your script:
    const web3 = AlchemyWeb3.createAlchemyWeb3(
        "https://eth-mainnet.alchemyapi.io/v2/1aZ1ZWH9087FqTnSSr7TI8ACFFgsIbcF"
    )

    async function main() {
        const web3 = AlchemyWeb3.createAlchemyWeb3("https://eth-mainnet.alchemyapi.io/v2/1aZ1ZWH9087FqTnSSr7TI8ACFFgsIbcF")
        const blockNumber = await web3.eth.getBlockNumber()
        console.log("My first exercise! The latest block number is " + blockNumber)

        // In the browser you can also output to the DOM:
        document.body.innerHTML += "My first exercise! The latest block number is " + blockNumber
    }
    main()
</script>

Note: as mentioned in the documentation, in the browser use AlchemyWeb3.createAlchemyWeb3()

Wow slebetman, thank you so much for taking the time to answer, you're absolutely right and the solution is working without any issues. Thank you! :) — krzyzws, Jul 23 '21 at 07:27

JS code working when ran in a node context but Uncaught ReferenceError in console

1 Answers1