After completing a few projects using the WAGMI example app for Remix, in the back of my head I kept asking myself: “there must be a better way than patching over Remix's esbuild configuration.”
Thankfully, in an update the Remix team included some of the Node.JS polyfills required to reduce the size of the WAGMI library patch. All that was left in order for WalletConnect, and Coinbase Wallet to work properly was to polyfill Node.JS Buffer.
After browsing the Remix Community Discord for the n-th time over the past few months, I stumbled upon a message by Kiliman. The solution was obvious, instead of overriding the esbuild config. We simply include a shim in the client entry for the Node.JS Buffer.
For the sake of not losing this information (until Web3.JS ships v4) to the discord abyss, I decided to post this in case anyone else stumbles upon this issue.
Make sure you have the following dependencies installed:
yarn add wagmi ethers buffer-esm
pnpm add wagmi ethers buffer-esm
npm i -S wagmi ethers buffer-esm
Open the file: app/routes/entry.client.tsx and import buffer-esm:
import { BufferShim as Buffer } from 'buffer-esm'
window.Buffer = window.Buffer || Buffer;
Then, make sure you have assigned global to the window object.
Open the file app/routes/root.tsx and insert the following script tag in the document <head>:
<script>{`var global = global || window;`}</script>
You're done!