Buffer is not defined

[ddkang]

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.

[DwGoing]

I have a same problem

[DwGoing]

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.

You can try this. Maybe you can find inspiration.

// vue.config.is
import webpack = require('webpack')

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

[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

[JonathanLehner]

@andy191x worked for me

[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 )

[xzilja]

With stable version 2.0.0 of Web3Modal now released, we are officially dropping support for version 1.x Due to this this issue/pr was marked for closing. It is highly recommended to upgrade as 2.x will be receiving further updates that will enable functionality for some of our newer sdks like auth and push as well as support for WalletConnect v2 (See this post about WalletConnect v1 being deprecated https://medium.com/walletconnect/walletconnect-v1-0-sunset-notice-and-migration-schedule-8af9d3720d2e)

If you need to continue using Web3Modal 1.x and require this feature/fix implemented, we suggest adding it via forking V1 branch.