ReferenceError: Buffer is not defined

[atrefonas]

I followed the steps for the My Algo Connect setup, and most of it was working (such as the popup to connect), but when it came to sign a transaction I was getting the error ReferenceError: Buffer is not defined at MyAlgoConnect.signTransaction (webpack://algodex/./node_modules/@randlabs/myalgo-connect/lib/main.js?:329:35).

I managed to fix this with a hack on line 11 in @randlabs/myalgo-connect/lib/main.js:

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

This looks like some dependency problem where NPM for MyAlgoConnect doesn't install the node module for Buffer as a sub-dependency of it. However, I'm not an NPM expert, so not sure why this happened.

[atrefonas]

This issue is related to using Webpack 5 instead of Webpack 4. Reverting to Webpack 4 (on alex99y's advice) fixed it. However, it is not working for anyone using Webpack 5.

[Ungolim]

This issue is related to using Webpack 5 instead of Webpack 4. Reverting to Webpack 4 (on alex99y's advice) fixed it. However, it is not working for anyone using Webpack 5.

+1

[Alex99y]

In the next version, we will fix this issue. Now, webpack v5 does not parse Buffer type, for those that prefer webpack v5 to webpack v4 here I found a temporal solution:
diegomura/react-pdf#1029 (comment)

I will keep this issue open until the problem has been solved in the next release.

[runvnc]

What I am doing is using Buffer from npm i buffer and then window.Buffer = Buffer. Seems to work, at least somewhat. But now I am having trouble with a supposedloy malformed address and I'm not sure if it might be related.

EDIT: yeah, does the same thing when I switched to the plugin and stuff from the reac-pdf comment, no error with Buffer, so I think that what I said above works, and my malformed address is a different issue.

[DanBurton]

I hit this issue when updating the Reach stdlib from webpack 4 to webpack 5. From the perspective of a @randlabs/myalgo-connect user, you can work around the issue by setting window.Buffer before any MyAlgoConnect code gets run:

import buffer from 'buffer';
const {Buffer} = buffer;

// ... 
if (!window.Buffer) window.Buffer = Buffer;
const mac = new MyAlgoConnect();

I believe the fix from the library's perspective is to add the explicit import of Buffer to the source file(s) that use it.

[sarahs07]

Resolved my issue with this https://viglucci.io/how-to-polyfill-buffer-with-webpack-5

const webpackConfig = {
    resolve: {
        fallback: {
            buffer: require.resolve('buffer/'),
        },
    },
    plugins: [
        new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
        }),
    ],
};

[ivnsch]

I was able to fix it with @DanBurton's workaround. The webpack settings alone don't seem to fix it.