react-query引入QueryClientProvider白屏报Hook错误解决方法

这个报错对应控制台提示的第三类诱因：依赖版本不兼容导致同个应用内存在多份React副本，Hook调用脱离了合法的函数组件上下文。
你通过npm install react-query安装的是已停止维护的v3版本react-query，这个旧包的peer依赖规则和最新React 18项目的依赖解析逻辑存在冲突，会导致QueryClientProvider组件内部调用useEffect等hooks时，无法匹配到当前项目运行的React实例上下文，直接抛出Cannot read properties of null (reading 'useEffect')错误，最终页面白屏。

补充说明：react-query从v4版本开始已经正式更名为@tanstack/react-query，旧npm包名react-query停更在v3.39.2版本，不再适配新的React大版本更新。

你原来编写的QueryClient实例化、Provider包裹的逻辑本身没有语法问题，不需要调整其他业务代码。

按顺序执行以下操作即可解决问题：

• 卸载旧版本不兼容的包

  npm uninstall react-query
  

• 安装官方持续维护的TanStack Query版本（兼容React 18）

  npm install @tanstack/react-query
  

• 修改index.js文件中的导入语句，把原来从旧包导入的代码替换为新包导入：

  // 注释/删除旧导入
  // import {  QueryClient, QueryClientProvider} from 'react-query';
  // 替换为新导入
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
  

• 如果执行完上述步骤后仍报相同错误，删除项目下的node_modules文件夹和package-lock.json文件，重新执行npm install全量安装依赖，清除之前的依赖缓存残留即可。

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