walletconnect-monorepo: Buffer is not defined error with CRA

npm install buffer

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

function App() {
...
}

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.

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.

npm install buffer

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

function App() {
...
}

This worked for me.

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.

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: @.***>

@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.

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'],
                }),
            ],
        },
    },
};

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

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

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

@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

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!

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'],
        }),
      ],
    },
  },
}