Explicitly import Buffer

[jasonpaulos]

Right now our code does not explicitly import any package to use Buffer; we just reference it as a global variable.

This is acceptable in Node, but browsers don't have a Buffer implementation. To solve this, we use a webpack plugin to provide Buffer as a global variable.

This works well for us, but when users attempt to use our package with a browser framework like React that does its own bundling, their build process doesn't know about this and will fail out of the box. Users are forced to change their own bundler configuration to match the change we made for Buffer. And since React apps are often started with create-react-app, which requires you to eject from the initial setup to modify bundler configs, this process has a lot of friction.

To improve things, we could explicitly import Buffer everywhere in the codebase where we reference it so that modifying our webpack config is no longer necessary. Some care will need to be taken to ensure that Node still uses the native Buffer implementation.

[AustP]

Our react apps currently use algosdk v1.20.0 and we were able to expose Buffer on the window object right as the app started up as a workaround.

window.Buffer = require('buffer/').Buffer;

After updating algosdk to v1.24.1, this workaround no longer works. I'm not sure what changed between the versions, but looking forward to being unblocked when the imports are fixed for Buffer.

[barnjamin]

@AustP I made a little CRA app to test and had to add the following to the config-overrides.js after setting up react-app-rewired

const webpack = require('webpack');
module.exports = function override(config, env) {
    config.plugins.push(new webpack.ProvidePlugin({Buffer: ['buffer', 'Buffer']}))
    return config
}