Buffer is not defined

web3modal crashes when WalletConnect is a provider with the following error:

Uncaught ReferenceError: Buffer is not defined
    at Object../node_modules/web3-provider-engine/node_modules/ethereumjs-util/dist/secp256k1-lib/der.js (der.js:6:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Object../node_modules/web3-provider-engine/node_modules/ethereumjs-util/dist/secp256k1-adapter.js (secp256k1-adapter.js:6:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Object../node_modules/web3-provider-engine/node_modules/ethereumjs-util/dist/index.js (index.js:11:1)
    at Object.options.factory (react refresh:6:1)

when using create-react-app version 5.0.0.

[andy191x]

@andy191x worked for me

Glad to hear that! I ended up running into more dependency issues with the missing polyfills. If you end up down that route, there’s a solution with react-app-rewired package ( https://alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5 )

[andy191x]

I ran into the same issue when upgrading to React 18 with CRA. This is because the Node polyfills are no longer bundled with webpack. This solution worked for my app:

Install the buffer package:

npm install buffer

Add the following line to index.js:

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

Additional reading:

https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack