Buffer is not defined error with CRA

[wnz99]

The standalone client will throw this error with CRA and package "react-scripts": "^5.0.0":

The reason is that Webpack 5 and CRA v5 don't add fallbacks for nodejs modules any more.

[derekcsm]

@wnz99 I'm also running into this, have you figured out a fix?

[ynunezaguirre]

I ran into the same issue with a lot of modules missing when using the last version of CRA a few days ago, it uses webpack 5.x, that has remove some node modules, Buffer is one them, a solution for me was to use Craco to config the webpack without ejecting. https://github.com/gsoft-inc/craco.

const webpack = require('webpack');

module.exports = {
    configure: {
      resolve: {
        fallback: {
          buffer: require.resolve('buffer'),
        },
      },
    },
    plugins: {
      add: [
        new webpack.ProvidePlugin({
          Buffer: ['buffer', 'Buffer'],
        }),
      ],
    },
  },
}

[hanahem]

@ynunezaguirre Thanks. The Craco workarout indeed fixes the Buffer dep issue, but pops new dependency issues with other modules. Do you think I should do the same thing for other missing modules to make it work? (pretty heavy to downgrade so many packages)

[wnz99]

Personally, I think that the documentation should not state that the package is compatible with browser, if it depends on modules only available on nodeJS. The browser version should include anything necessary to run out of the box, imho.

[ynunezaguirre]

@ynunezaguirre Thanks. The Craco workarout indeed fixes the Buffer dep issue, but pops new dependency issues with other modules. Do you think I should do the same thing for other missing modules to make it work? (pretty heavy to downgrade so many packages)

For now i haven't found another workaround to make it run :/
There is a plugin node-polyfill-webpack-plugin that maybe can help you , but doesn't work for me with all modules missing.

[hanahem]

Just found a dirty workaround similar to the one posted by @ynunezaguirre Not using Craco but react-app-rewired.

Still on webpack 5.x Added a config-overrides.js in the root:

const webpack = require('webpack');
module.exports = function override(config, env) {
    config.resolve.fallback = {
        url: require.resolve('url'),
        assert: require.resolve('assert'),
        buffer: require.resolve('buffer'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

And npm install process

Then updated the scripts part of package.json

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
 }

This works fine with me for now. I can use the client and pop the QR modal.

[Sednaoui]

craco config didn't work for me initially until I installed buffer as a dev dependency and did -> buffer: require.resolve('buffer/')

missing / at the end of buffer.

from the docs:

To require this module explicitly, use require('buffer/') which tells the node.js module lookup algorithm (also used by browserify) to use the npm module named buffer instead of the node.js core module named buffer!

[armgit5]

@esbuild-plugins/node-globals-polyfill was able to help me out with global is not defined and Buffer is not defined here is related comment https://github.com/plouc/nivo/issues/1455#issuecomment-1041830487

[willisk]

Thanks @hanahem, also got it to work now. I had to additionally install util and add it to the config npm install util

/* config-overrides.js */
const webpack = require('webpack');
module.exports = function override(config, env) {
    config.resolve.fallback = {
        util: require.resolve('util/'),
        url: require.resolve('url'),
        assert: require.resolve('assert'),
        buffer: require.resolve('buffer'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

This is just terrible imo, I spent an ENTIRE day fumbling around, exploring solutions, because of incompatible packages.

[ddkang]

Are there any plans to fix this?

[atropos0902]

Are there any plans to fix this?

I was able to make it run by downgrading react-scripts version to 4.0.3 but I don't think it's the best solution. This should be fixed ASAP @pedrouid

[crazyrabbitLTC]

Yeah I wish there was a solution for this. I'm on Redwoodjs.

[ddkang]

Are there any plans to fix this? This bug prevents updating to the latest versions of packages.

[ShevaShen]

Here is a solution from coinbase https://docs.cloud.coinbase.com/wallet-sdk/docs/web3-react#a-nametroubleshootingatroubleshooting

[ddkang]

This does not work with create-react-app, which does not allow webpack overrides

[ShevaShen]

This does not work with create-react-app, which does not allow webpack overrides

downgrade to react-script v4, v5 has so many bugs the CRA team needs to fix

[ericlewis966]

If we are using React 17 or 18, we can't avoid "Buffer undefined" proflem without "config-overides.js". We have to downgrade react version to use walletconnect libraries.

[OmBayus]

npm install buffer

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

function App() {
...
}

[DalSoft]

I ran into the same issue with a lot of modules missing when using the last version of CRA a few days ago, it uses webpack 5.x, that has remove some node modules, Buffer is one them, a solution for me was to use Craco to config the webpack without ejecting. https://github.com/gsoft-inc/craco.

const webpack = require('webpack');

module.exports = {
    configure: {
      resolve: {
        fallback: {
          buffer: require.resolve('buffer'),
        },
      },
    },
    plugins: {
      add: [
        new webpack.ProvidePlugin({
          Buffer: ['buffer', 'Buffer'],
        }),
      ],
    },
  },
}

Slight change (needs to be nested in the webpack property) to get this working with CRACO, and CRA 5.0.1

const webpack = require('webpack');
module.exports = {
    webpack: {
        configure: {
            resolve: {
                fallback: {
                    buffer: require.resolve('buffer'),
                },
            },
        },
        plugins: {
            add: [
                new webpack.ProvidePlugin({
                    Buffer: ['buffer', 'Buffer'],
                }),
            ],
        },
    },
};

[ogbuanu]

npm install buffer

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

function App() {
...
}

This worked for me.

[finessevanes]

@wnz99 is this still an issue?

[ogbuanu]

No

On Fri, Jan 13, 2023, 5:34 AM vanes @.***> wrote:

@wnz99 https://github.com/wnz99 is this still an issue?

— Reply to this email directly, view it on GitHub https://github.com/WalletConnect/walletconnect-monorepo/issues/748#issuecomment-1381305253, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATMQYG7UF6P76MCXT5Q43WDWSDLOLANCNFSM5NVHDNNA . You are receiving this because you commented.Message ID: @.***>

[RicFer01]

I still have this error just installing buffer and doing window.Buffer = window.Buffer || Buffer;, in order to fix is it necessary to use CRACO?

[guppykang]

I continue to get this error, and am using

  util: require.resolve('util/'),
        assert: require.resolve('assert/'),
        stream: require.resolve('stream-browserify'),
        zlib: require.resolve('browserify-zlib'),
        buffer: require.resolve('buffer'),
        process: require.resolve('process/browser'),

as well as adding the plugins via:

plugins: {
      add: [
        new webpack.ProvidePlugin({
          Buffer: ['buffer', 'Buffer'],
          process: 'process/browser',
        }),
      ],
    },

I also added window.Buffer = window.Buffer || Buffer; to the root index.js file

[RicFer01]

I continue to get this error, and am using

  util: require.resolve('util/'),
        assert: require.resolve('assert/'),
        stream: require.resolve('stream-browserify'),
        zlib: require.resolve('browserify-zlib'),
        buffer: require.resolve('buffer'),
        process: require.resolve('process/browser'),

as well as adding the plugins via:

plugins: {
      add: [
        new webpack.ProvidePlugin({
          Buffer: ['buffer', 'Buffer'],
          process: 'process/browser',
        }),
      ],
    },

I also added window.Buffer = window.Buffer || Buffer; to the root index.js file

I fixed like this:

config.resolve.fallback = {
    crypto: require.resolve('crypto-browserify'),
    util: require.resolve('util/'),
    url: require.resolve('url'),
    assert: require.resolve('assert'),
    buffer: require.resolve('buffer'),
};

config.plugins.push(
    new webpack.ProvidePlugin({
        process: 'process/browser',
        Buffer: ['buffer', 'Buffer'],
    }),
);