WalletConnect popup not loading: networkError=ReferenceError: Buffer is not defined

[marcellodesales]

🐛 Problem

• All configured settings for Metamask as the same, and it works properly
• The WalletConnect configuration suggested is not working
  • https://www.coinbase.com/cloud/discover/dev-foundations/use-web3-react-to-connect-wallet

It looks like the problem is somewhere at the following:

I'm on Webpack 5, it seems like this is related to not having Webpack 4

• https://stackoverflow.com/questions/70420479/react-uncaught-referenceerror-buffer-is-not-defined

👨‍💻 WalletConnect Config

    public getWalletConnector() {
        const walletConnect = new WalletConnectConnector({
            infuraId: this.config.blockchain.network.getInfuraToken(),
            rpc: {
                '1': `https://mainnet.infura.io/v3/${this.config.blockchain.network.getInfuraToken()}`,
                // '137': 'https://polygon-mainnet.infura.io/v3/<API_KEY>',
            },
            supportedChainIds: this.config.blockchain.network.getSupportedNetworkIds(),
            bridge: "https://bridge.walletconnect.org",
            qrcode: true,
        });
        return walletConnect;
    }

    /**
     * Selector for provider
     * https://docs.cloud.coinbase.com/wallet-sdk/docs/web3-react#step-2-import-and-setup-web3reactprovider
     * @param provider is the provided initialized
     */
    public getLibrary(provider: ExternalProvider | JsonRpcFetchFunc) {
        return new Web3Provider(provider);
    }

👨‍💻 Modal Header where Button is located

• We store the selected provider (Metamask or WalletConnect) in local storage, whatever the user chooses

export const Modal = () => {
    const sendGoogleAnalyticsEvent = marketingService.googleAnalyticsService.makeEventTracker( "Wallet Profile");

    // This must be called from inside a React Component
    const { activate, active:isActive, error:networkError } = useWeb3React();

    // @ts-ignore
    let ref = useRef<HTMLDivElement>(null);
    const dispatch = useDispatch();
    useOutsideClick(ref, () => dispatch(appAC.setShowModal(false)));

    /**
     * https://stackoverflow.com/questions/68345619/how-to-keep-metamask-connection-to-the-ui-persistent-with-web3-react/70364470#70364470
     * @param type the name of the type of provider to be persisted in local storage
     */
    const setProvider = (type:string) => {
        window.localStorage.setItem("provider", type);
    };

    /**
     * Connects the user account from the provider
     * https://docs.cloud.coinbase.com/wallet-sdk/docs/web3-react#connect-and-disconnect-from-wallet
     */
    const activateWalletHandler = async (handlerName:string, handler:SupercashBlockchainWallet) => {
        console.log(`Activation network: current networkError=${networkError} ... isActive=${isActive}`)
        console.log(`Open wallet collector for '${handlerName}'`)
        const connector = handler.getWalletConnector();
        console.log(`Will active connector=${JSON.stringify(connector)}`)

        return await activate(connector).then(() => {
            //here we use activate to create the connection
            console.log(`connected to ${handlerName}`)

        }).catch((errorActivating) => {
            console.log(`Error activating wallet connector '${handlerName}': ${errorActivating}`)
        })
    }

👨‍💻 Button Component with Activate Wallet Handler call

<div className={style.btns}>
                    {
                        buttons.map(({icon, label, handler}, index) => (
                            <button key={index}
                                    onClick={async () => {
                                        console.log(`Activating the connector '${label}'`);
                                        await activateWalletHandler(label, handler).then(() => {
                                            console.log(`Activated the connector '${label}'`)
                                            dispatch(appAC.setConnect(true));

                                            console.log(`Setting the provider as '${label}' on local storage`)
                                            setProvider(label);

                                            // Remove the modal
                                            dispatch(appAC.setShowModal(false));

                                        }).catch((reason) => {
                                            console.log(`Error activating connector '${label}': ${reason}`)
                                        });

                                        // Send the event to google analytics in parallel
                                        sendGoogleAnalyticsEvent("button clicked", label);
                                    }}
                            >
                                {icon}
                                <p className={style.label}>{label}</p>
                            </button>
                        ))
                    }
                </div>

🎨 Metamask Works properly

• It loads the configs properly
• It loads the Metamask wallet
• It loads the info

NOTE: networkError=undefined when calling Metamask

Activating the connector 'Metamask' [main.1646c262.js:2:29543](https://supercash.gitlab.io/products/blockchain/landing/ppd-qal/static/js/main.1646c262.js)
any networkError=undefined or isActive=false main.1646c262.js:2:29543
Open wallet collector for 'Metamask' [main.1646c262.js:2:29543](https://supercash.gitlab.io/products/blockchain/landing/ppd-qal/static/js/main.1646c262.js)

{"_events":{},"_eventsCount":0,"supportedChainIds":[1,3,4,5,42]} 

connected to Metamask [main.1646c262.js:2:29543](https://supercash.gitlab.io/products/blockchain/landing/ppd-qal/static/js/main.1646c262.js)
Activated the connector 'Metamask' main.1646c262.js:2:29543
Setting the provider as 'Metamask' on local storage

🐞 WalletConnect doesn't load: ERROR: networkError=ReferenceError: Buffer is not defined

• It goes through the same process
• This is the log of the Wallet Config that's loaded

ERROR: networkError=ReferenceError: Buffer is not defined

• How to solve this properly?

Activating the connector 'Walletconnect' [main.1646c262.js:2:29543](https://supercash.gitlab.io/products/blockchain/cro-cactus/web/cro-cactus-landing-page/ppd-qal/static/js/main.1646c262.js)
any networkError=undefined or isActive=false main.1646c262.js:2:29543
Open wallet collector for 'Walletconnect' [main.1646c262.js:2:29543](https://supercash.gitlab.io/products/blockchain/cro-cactus/web/cro-cactus-landing-page/ppd-qal/static/js/main.1646c262.js)

{"_events":{},"_eventsCount":0,"supportedChainIds":[1,3,4,5,42],
"config":{"infuraId":"9ed3854e3939402e9dc0d74e4c58945e",
"rpc":{"1":"https://mainnet.infura.io/v3/9ed3854e3939402e9dc0d74e4c58945e"},
"supportedChainIds":[1,3,4,5,42],"bridge":"https://bridge.walletconnect.org","qrcode":true}} 

connected to Walletconnect [main.1646c262.js:2:29543](https://supercash.gitlab.io/products/blockchain/cro-cactus/web/cro-cactus-landing-page/ppd-qal/static/js/main.1646c262.js)
Activated the connector 'Walletconnect' main.1646c262.js:2:29543
Setting the provider as 'Walletconnect' on local storage

• Reloading the page, and trying to get the same object, the error is as follows:

Activating the connector 'Walletconnect' [main.1646c262.js:2:29543](https://supercash.gitlab.io/products/blockchain/cro-cactus/web/cro-cactus-landing-page/ppd-qal/static/js/main.1646c262.js)
any networkError=ReferenceError: Buffer is not defined ... isActive=false main.1646c262.js:2:29543
Open wallet collector for 'Walletconnect' [main.1646c262.js:2:29543](https://supercash.gitlab.io/products/blockchain/cro-cactus/web/cro-cactus-landing-page/ppd-qal/static/js/main.1646c262.js)

{"_events":{},"_eventsCount":0,"supportedChainIds":[1,3,4,5,42],
"config":{"infuraId":"9ed3854e3939402e9dc0d74e4c58945e",
"rpc":{"1":"https://mainnet.infura.io/v3/9ed3854e3939402e9dc0d74e4c58945e"},
"supportedChainIds":[1,3,4,5,42],"bridge":"https://bridge.walletconnect.org","qrcode":true}} 

connected to Walletconnect [main.1646c262.js:2:29543](https://supercash.gitlab.io/products/blockchain/cro-cactus/web/cro-cactus-landing-page/ppd-qal/static/js/main.1646c262.js)
Activated the connector 'Walletconnect' main.1646c262.js:2:29543
Setting the provider as 'Walletconnect' on local storage

🎛️ package.json

NOTE: The reference from Coinbase suggests to install a couple of libraries

• https://docs.cloud.coinbase.com/wallet-sdk/docs/web3-react#a-nametroubleshootingatroubleshooting
• These are installed, but not working yet :(

{
  "homepage": "./",
  "name": "app",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@sentry/react": "^6.19.7",
    "@sentry/tracing": "^6.19.7",
    "@web3-react/core": "^6.1.9",
    "@web3-react/injected-connector": "^6.0.7",
    "@web3-react/walletconnect-connector": "^6.2.13",
    "antd": "^4.20.4",
    "assert": "^2.0.0",
    "buffer": "^6.0.3",
    "clsx": "^1.1.1",
    "ethers": "^5.6.5",
    "node-sass": "^7.0.1",
    "react": "^18.0.0",
    "react-app-rewired": "^2.2.1",
    "react-dom": "^18.0.0",
    "react-ga": "^3.3.0",
    "react-redux": "^7.2.8",
    "react-router-dom": "^6.2.2",
    "react-router-hash-link": "^2.4.3",
    "react-scripts": "5.0.0",
    "react-tooltip": "^4.2.21",
    "redux": "^4.1.2",
    "stream-browserify": "^3.0.0",
    "swiper": "^8.0.7",
    "typescript": "^4.4.2",
    "util": "^0.12.4",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^17.0.20",
    "@types/react-dom": "^17.0.9",
    "@types/react-router-hash-link": "^2.4.5"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[marcellodesales]

possible solution?

• https://stackoverflow.com/questions/71085181/import-web3-into-react-js-getting-breaking-change-webpack-5-used-to-incl/71128490#71128490

[ghost]

please see https://github.com/NoahZinsmeister/web3-react/issues/423