web3js (v1.0.0-beta36) unable to use - Cannot find module 'buffer'

Question

I included dist/web3.js (1.0.0-beta36) in my html file as below

<script type="text/javascript" src="./web3.js"></script>
<script type="text/javascript">
    var Web3 = require('web3');        
    var web3 = new Web3();

    window.onload = function() {
        web3.setProvider(new web3.providers.HttpProvider("https://api.myetherwallet.com/eth"));
        var account = web3.version;
        var balance = web3.eth.blockNumber;
        balance = 0;
    };
</script>

When I launch the html with Firefox/Chrome it throws exception Error: Cannot find module 'buffer' then follow by Uncaught ReferenceError: require is not defined

If I downgrade the version of web3.js to v0.20.6, it functions ok. Did I missed something?

Answer 1

There are two main issues here:

1. require is a part of the Node.js module system, and will not work on standard HTML page, nor do you need it.

2. The function you want to call to get the current block number is web3.eth.getBlockNumber(), which is an asynchronous function, so you will also need to handle that.

Your code will work if written like so:

<script type="text/javascript" src="./web3.js"></script>
<script type="text/javascript">
window.onload = async function () {
    var web3 = new Web3('https://api.myetherwallet.com/eth');
    var version = web3.version;
    var blockNumber = await web3.eth.getBlockNumber();

    console.log(version, blockNumber);

};
</script>

Here is a working example: https://jsfiddle.net/d8rus2hc/