React集成web3modal遇WagmiConfig报错：queryClient未定义

问题描述 #

在React应用中集成web3modal时，浏览器抛出错误：Cannot read properties of undefined (reading 'queryClient')。使用最新版本的React和react-router-dom作为路由工具，相关组件代码如下：

主App组件代码 #

import { Web3Modal } from '@web3modal/react'
import { configureChains, createConfig, WagmiConfig } from 'wagmi'
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { polygonMumbai } from 'wagmi/chains'

import {Routes, Route} from "react-router-dom";
import Main from './Pages/Main';
import MarketPlace from './Pages/MarketPlace.js';
import CreatePost from './Pages/CreatePost';
import Post from './Pages/Post';
import Login from './Pages/Login';

function App() {
  const chains = [polygonMumbai]
  const projectId = 'id'

  const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
  const wagmiConfig = createConfig({
    autoConnect: true,
    connectors: w3mConnectors({ projectId, version: 1, chains }),
    publicClient
  })

  const ethereumClient = new EthereumClient(wagmiConfig, chains)

  return (
    <>
    <WagmiConfig client={wagmiConfig}>
        <Routes>
          <Route path='/login' element={<Login type="login"/>}/>
          <Route path='/signup' element={<Login type="signup"/>}/>
          <Route path='/' element={<Post/>}/>
          <Route path='/marketPlace' element={<MarketPlace/>}/>
          <Route path='/createPost' element={<CreatePost/>}></Route>
          <Route path='/myaccount' element={<></>}/>
          <Route path='/topposts' element={<Main type="top"/>}/>
          <Route path='/technical' element={<Main type="technical"/>}/>
          <Route path='/indicators' element={<></>}/>
          <Route path='/news' element={<Main type="news"/>}/>
        </Routes>
    </WagmiConfig>
    <Web3Modal projectId={projectId} ethereumClient={ethereumClient}/>
    </>
  )
}

export default App;

Login组件代码 #

import './login.css';
import { useEffect, useState } from 'react';
import {connectWallet} from '../contractModel';
import { Web3Button } from '@web3modal/react'
import { useAccount, useDisconnect, useSigner } from 'wagmi';
import { ethers } from 'ethers';

function Login(){
    let innerWidth = window.innerWidth;
    useEffect(()=>{});
    
    if(innerWidth>600){
        return(
            <div className='login'>
                <p className='logo'>FlashFeed</p>
                <div className='loginBody'>
                <Web3Button/>
                </div>
            </div>
        );
    }
    else{
      return(
        <div>
        </div>
      )
    }
}

export default Login;

报错原因 #

该错误源于wagmi v1.x版本的配置要求：createConfig函数必须接收queryClient参数，但当前代码仅传入了publicClient，缺少queryClient的配置，导致wagmi内部尝试访问未定义的queryClient属性。

解决方案 #

修改App组件中的配置逻辑，从configureChains的返回值中解构出queryClient并传入createConfig：

修改后的App组件代码 #

import { Web3Modal } from '@web3modal/react'
import { configureChains, createConfig, WagmiConfig } from 'wagmi'
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { polygonMumbai } from 'wagmi/chains'

import {Routes, Route} from "react-router-dom";
import Main from './Pages/Main';
import MarketPlace from './Pages/MarketPlace.js';
import CreatePost from './Pages/CreatePost';
import Post from './Pages/Post';
import Login from './Pages/Login';

function App() {
  const chains = [polygonMumbai]
  const projectId = 'id'

  // 解构出queryClient
  const { publicClient, queryClient } = configureChains(chains, [w3mProvider({ projectId })])
  const wagmiConfig = createConfig({
    autoConnect: true,
    connectors: w3mConnectors({ projectId, version: 1, chains }),
    publicClient,
    // 添加queryClient参数
    queryClient
  })

  const ethereumClient = new EthereumClient(wagmiConfig, chains)

  return (
    <>
    <WagmiConfig client={wagmiConfig}>
        <Routes>
          <Route path='/login' element={<Login type="login"/>}/>
          <Route path='/signup' element={<Login type="signup"/>}/>
          <Route path='/' element={<Post/>}/>
          <Route path='/marketPlace' element={<MarketPlace/>}/>
          <Route path='/createPost' element={<CreatePost/>}></Route>
          <Route path='/myaccount' element={<></>}/>
          <Route path='/topposts' element={<Main type="top"/>}/>
          <Route path='/technical' element={<Main type="technical"/>}/>
          <Route path='/indicators' element={<></>}/>
          <Route path='/news' element={<Main type="news"/>}/>
        </Routes>
    </WagmiConfig>
    <Web3Modal projectId={projectId} ethereumClient={ethereumClient}/>
    </>
  )
}

export default App;

验证步骤 #

1. 替换修改后的代码
2. 重新启动React应用
3. 访问登录页面，Web3Button应正常渲染，不再出现queryClient相关报错

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