NextJs配置wagmi 2.x时出现QueryClient未设置错误求助

我在Next.js应用中配置Wagmi 2.x时遇到以下错误：

Error : No QueryClient set, use QueryClientProvider to set one wagmi and tanstack/react-query

已完成的排查动作：

• 确认仅安装了一个@tanstack/react-query版本，无版本冲突
• 依赖版本完全对齐Wagmi官方Codesandbox示例

但本地运行仍报错，Codesandbox中相同配置却能正常运行，求技术支持。

我的代码配置 #

pages/_app.tsx 代码：

import {
    QueryClient,
    QueryClientProvider,
} from "@tanstack/react-query";
import { createConfig, http, WagmiProvider } from "wagmi";
import { mainnet, sepolia } from "wagmi/chains";

export default function MyApp({
    Component,
    pageProps,
}: AppProps) {
    const wagmiConfig = createConfig({
        chains: [mainnet, sepolia],
        connectors: [
            injected(),
        ],
        transports: {
            [mainnet.id]: http(),
            [sepolia.id]: http(),
        },
    });

    const queryClient = new QueryClient({
        defaultOptions: {
            queries: {
                staleTime: Infinity,
            },
        },
    });

    return (
        <div
            className={`w-full h-full min-w-screen min-h-screen bg-[#12192E] ${manrope.className}`}>
            <WagmiProvider config={wagmiConfig}>
                <QueryClientProvider client={queryClient}>
                    <ConnectKitProvider>
                        <Provider store={store}>
                            <Navbar />
                            <Component {...pageProps} />
                        </Provider>
                    </ConnectKitProvider>
                </QueryClientProvider>
            </WagmiProvider>
        </div>
    );
}

package.json 依赖配置：

{
    "name": "test-app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        "@tanstack/react-query": "5.0.5",
        "@types/node": "20.3.1",
        "@types/react": "18.2.12",
        "@types/react-dom": "18.2.5",
        "@types/react-modal": "^3.16.2",
        "@wagmi/connectors": "4.0.1",
        "connectkit": "^1.7.3",
        "ethers": "^6.7.0",
        "next": "13.4.5",
        "viem": "2.0.0",
        "wagmi": "2.0.1"
    }
}

可能的解决方案 #

• 补全缺失的连接器导入：
  代码中使用了injected()但未导入，需添加：

  import { injected } from "@wagmi/connectors";
  

  缺失导入会导致初始化异常，间接触发QueryClient相关错误。

• 修正Provider嵌套顺序：
  Wagmi 2.x要求QueryClientProvider必须包裹WagmiProvider，因为Wagmi内部依赖React Query的实例。你的代码顺序颠倒了，正确结构如下：

  <QueryClientProvider client={queryClient}>
    <WagmiProvider config={wagmiConfig}>
      <ConnectKitProvider>
        <Provider store={store}>
          <Navbar />
          <Component {...pageProps} />
        </Provider>
      </ConnectKitProvider>
    </WagmiProvider>
  </QueryClientProvider>
  

• 清理依赖缓存重新安装：
  本地依赖缓存可能存在冲突，执行以下命令重置：

  rm -rf node_modules package-lock.json
  npm install
  

• 适配Next.js App Router（若使用）：
  如果你用的是Next.js 13 App Router（app目录），需将Providers配置放在根布局app/layout.tsx中，而非pages/_app.tsx，确保Providers在应用最顶层生效。

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