集成React Query Dev Tools后React Query无法正常使用求助

集成React Query Dev Tools前，我的React Query可以正常工作，但添加该工具后就无法使用了。以下是相关代码、错误截图和已安装依赖，寻求解决方案：

核心代码 #

import "bootstrap/dist/css/bootstrap.css";
import React from "react";
import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import App from "./App";
import "./index.css";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools />
    </QueryClientProvider>
  </React.StrictMode>
);

错误截图 #

已安装依赖 #

{
  "dependencies": {
    "@tanstack/react-query-devtools": "4.28",
    "@tanstack/react-query": "4.28",
  }
}

解决方案 #

• 统一依赖精确版本：当前仅指定主版本4.28，未锁定子版本，可能导致react-query与react-query-devtools内部版本不匹配。将两者版本改为完全一致的精确版本，例如：

{
  "dependencies": {
    "@tanstack/react-query-devtools": "4.28.0",
    "@tanstack/react-query": "4.28.0"
  }
}

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

• 完善DevTools组件初始化：给ReactQueryDevtools添加initialIsOpen参数，确保组件正常加载：

<ReactQueryDevtools initialIsOpen={false} />

• 确认React版本兼容：React Query v4要求React版本≥16.8，检查项目React版本是否满足要求，过低版本会引发兼容性错误。

内容的提问来源于stack exchange，提问作者Hannan Yusuf Khan