Struggling with WalletConnect and Rainbow wallets

[pixlpa]

I've implemented RainbowKit on my NFT minting site, which is really great once I got a better handle on wagmi hooks, which was a bit of a struggle. Now that I have everything in place, I'm able to connect on desktop/Chrome through Metamask with no problem, but on iOS the WalletConnect button in the connect modal doesn't do anything. The Rainbow button takes me through but I get a connection error inside the Rainbow app. I also notice that on desktop, when I select WalletConnect, I get this error in the console:

ReferenceError: Buffer is not defined
at typedarrayToBuffer (index.js:15:1)
at Module.arrayToBuffer (index.ts:43:1)
at Module.generateKey (index.ts:14:1)
at WalletConnect._generateKey (index.ts:1161:1)
at WalletConnect.createSession (index.ts:464:1)
at SignerConnection.create (index.ts:171:1)
at index.ts:77:1
at new Promise ()
at SignerConnection.open (index.ts:68:1)
at JsonRpcProvider.open (provider.ts:113:1)

react_devtools_backend.js:3973
…and clicking OPEN below the QR code doesn't take me to the walletconnect official modal. I get the same error message when clicking on the Rainbow button as well.
Besides this, I've set up my dependencies and RainbowKit setup basically the same as the examples.

[pixlpa]

I've cleared up the Buffer error based on some googling by installing the buffer npm package and adding this line to index.js in my react app: window.Buffer = window.Buffer || require("buffer").Buffer;

[pixlpa]

Replying to myself one more time to confirm that installing Buffer was the necessary fix and all is working well on my site.

[Jaesul]

Hey I'm trying to apply this solution to my code. I did npm install buffer then did window.Buffer = window.Buffer || require("buffer").Buffer; right before ReactDom.render still giving me that ReferenceError. Any steps I'm missing?

This is what my index.js looks like

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

ReactDOM.render(
<React.StrictMode>

</React.StrictMode>,
document.getElementById('root')
);