使用wagmi时CoinbaseWalletConnector连接失败，报Buffer未定义错误求助

使用wagmi开发去中心化应用时，CoinbaseWalletConnector无法正常连接，其余钱包（MetaMask、WalletConnect）均可正常工作，连接时抛出以下错误：

Uncaught ReferenceError: Buffer is not defined
    at Object.__ (QRCode.js:27:1)

相关代码 #

App.js

import { WagmiConfig, createClient } from "wagmi";
import { configureChains } from "wagmi";
import { avalanche, bsc, mainnet } from '@wagmi/core/chains'

import { infuraProvider } from "wagmi/providers/infura";
import { publicProvider } from "wagmi/providers/public";

import { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet";
import { MetaMaskConnector } from "wagmi/connectors/metaMask";
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'

const infuraId = process.env.INFURA_ID;
const defaultChains = [mainnet, avalanche, bsc]

const { chains } = configureChains(defaultChains, [
    infuraProvider({ infuraId }),
    publicProvider(),
]);

export const connectors = [
    new CoinbaseWalletConnector({
        chains,
        options: {
            appName: "wagmi demo",
            qrcode: true,
        },
    }),
    new WalletConnectConnector({
        chains,
        options: {
            infuraId,
            qrcode: true,
        },
    }),
    new MetaMaskConnector({
        chains,
    }),
];
const client = createClient({
    autoConnect: false,
    connectors,
});

function App() {
  return (
    <>
        <WagmiConfig client={client}>
            <Home />
        </WagmiConfig>
    </>
  );
}

组件代码

import { useConnect } from "wagmi";

const Component = (props) => {
    const { connect, connectors } = useConnect();
    return (
        <>
            <WalletButton 
                img={metaMask}
                title={"MetaMask"}
                onPress={() => { connect({ connector: connectors[2] }) }}
            />

            <WalletButton 
                img={coinbase}
                title={"Coinbase wallet"}
                onPress={() => { connect({ connector: connectors[0] }) }}
            />

            <WalletButton 
                img={walletConnectImg}
                title={"Wallet connect"}
                onPress={() => { connect({ connector: connectors[1] }) }}
            />
        </>
    )
}

原因分析 #

现代前端构建工具（如Vite、Create React App 5+、Next.js 13+）不再默认注入Node.js核心模块（如Buffer），而Coinbase钱包连接器的QR码生成逻辑依赖Buffer，导致运行时出现未定义错误。

解决方法 #

方法1：添加Buffer Polyfill（推荐） #

通过安装buffer包并配置构建工具，在前端环境中注入Buffer模块：

1. 安装依赖：

npm install buffer
# 或使用yarn
yarn add buffer

2. 根据你的构建工具进行配置：

Vite项目

修改vite.config.js：

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      buffer: 'buffer',
    },
  },
  optimizeDeps: {
    include: ['buffer'],
  },
  define: {
    global: 'window',
    'process.env': {},
  },
})

在项目入口文件（如main.jsx）顶部添加：

import { Buffer } from 'buffer'
window.Buffer = Buffer

Create React App 5+项目

安装react-app-rewired和customize-cra：

npm install react-app-rewired customize-cra --save-dev

创建config-overrides.js文件：

const { override, addWebpackAlias } = require('customize-cra')
const path = require('path')

module.exports = override(
  addWebpackAlias({
    buffer: path.resolve(__dirname, 'node_modules/buffer'),
  }),
  (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      buffer: require.resolve('buffer'),
    }
    return config
  }
)

修改package.json的启动脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

在入口文件顶部添加：

import { Buffer } from 'buffer'
window.Buffer = Buffer

Next.js项目

修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      buffer: require.resolve('buffer'),
    }
    return config
  },
}

module.exports = nextConfig

在_app.jsx/_app.tsx顶部添加：

import { Buffer } from 'buffer'
window.Buffer = Buffer

方法2：禁用QR码显示（临时方案） #

如果只需要支持Coinbase浏览器扩展，不需要移动端扫码连接，可以关闭CoinbaseWalletConnector的QR码选项：

new CoinbaseWalletConnector({
  chains,
  options: {
    appName: "wagmi demo",
    qrcode: false, // 关闭QR码生成
  },
}),

此方法可以快速绕过错误，但会失去移动端扫码连接的功能。

内容的提问来源于stack exchange，提问作者StepsOnes