排查ConnectKitProvider重复嵌套报错（代码无重复实例）

你遇到的报错Uncaught Error: Multiple, Nested Usages of ConnectKitProvider Detected，即使代码中没有显式嵌套Provider，也可能由以下隐蔽原因导致，按以下步骤排查：

1. 依赖重复安装导致多版本冲突 #

不同依赖可能间接引入了多个版本的connectkit，导致运行时出现多个Provider实例。

• 检查依赖树：

  npm ls connectkit
  # 或 yarn why connectkit
  

• 如果发现多个版本，在package.json中强制统一版本：

  "overrides": {
    "connectkit": "^1.6.0" // 替换为你使用的最新兼容版本
  }
  

  执行npm install或yarn install重新安装依赖。

2. Lens Provider的隐性嵌套冲突 #

@lens-protocol/react-web的LensProvider可能内部集成了Wagmi/ConnectKit相关逻辑，与你手动添加的ConnectKitProvider产生冲突。

• 临时注释LensProvider测试：

  export function Web3Provider({ children }: { children: React.ReactNode }) {
    return (
      <WagmiProvider config={wagmiConfig}>
        <QueryClientProvider client={queryClient}>
          <ConnectKitProvider>
            {/* 临时注释LensProvider */}
            {children}
          </ConnectKitProvider>
        </QueryClientProvider>
      </WagmiProvider>
    );
  };
  

  如果报错消失，说明Lens Provider与ConnectKit存在兼容问题，需查看Lens官方文档确认配置方式，或调整两者的嵌套顺序。

3. Next.js App Router的组件边界问题 #

在Next.js App Router中，若Web3Provider被多个层级的布局/页面重复引入（比如根layout.tsx和某个子页面都包裹了该Provider），会导致嵌套。

• 确认仅在根layout.tsx中引入Web3Provider，所有子页面/组件直接使用其提供的上下文，避免重复包裹。

4. 开发环境HMR热更新导致的临时多实例 #

开发环境下，Hot Module Replacement（HMR）可能在热更新时重复挂载Provider，产生临时多实例。

• 重启开发服务器，或临时禁用HMR测试：
  在next.config.js中添加：

  const nextConfig = {
    webpack: (config) => {
      config.devServer.hot = false;
      return config;
    },
  };
  module.exports = nextConfig;
  

  重启服务后看报错是否消失。

5. 全局配置实例的重复创建 #

若wagmiConfig或queryClient在动态导入的模块中被重复创建，可能导致多个Provider关联不同的配置实例，触发报错。

• 确保wagmiConfig、queryClient等全局实例仅在组件外部初始化一次，避免在动态导入的组件内部重复创建。

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