已安装@tanstack/react-query-devtools仍提示找不到模块求助

核心原因 #

React Query从v5版本开始，已经将ReactQueryDevtools整合进主包@tanstack/react-query，不再需要单独安装@tanstack/react-query-devtools包，你当前的导入路径是旧版本的写法，所以会触发模块找不到的错误。

具体解决步骤 #

1. 卸载多余的devtools包
   在终端执行对应命令移除不需要的包：

   npm uninstall @tanstack/react-query-devtools
   # 若使用pnpm或yarn，替换为：
   # pnpm remove @tanstack/react-query-devtools
   # yarn remove @tanstack/react-query-devtools
   

2. 修改导入语句
   将main.tsx中的导入代码替换为：

   import { ReactQueryDevtools } from "@tanstack/react-query";
   

3. 重启开发服务器验证
   关闭当前的vite开发服务器，重新执行npm run dev启动，此时模块找不到的错误应该会消失。

额外排查方案（若以上步骤无效） #

• 检查TypeScript配置：确保tsconfig.json中的moduleResolution设置为"node16"或"bundler"（适配ES模块的解析规则）：

  {
    "compilerOptions": {
      "moduleResolution": "bundler"
    }
  }
  

• 清理依赖缓存重新安装：删除node_modules文件夹和package-lock.json（或对应锁文件），执行npm install重新安装所有依赖。

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