找不到模块“@tanstack/react-query-devtools”或其相应的类型声明

Question

我已经安装了最新版本的@tanstack/react-query和@tanstack/react-query-devtools，但是当尝试从@tanstack/react-query-devtools导入ReactQueryDevtools时，它给出了上述错误

这是我的 package.json 文件

{
  "name": "intermediate-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@tanstack/react-query": "^5.32.1",
    "@tanstack/react-query-devtools": "^5.32.1",
    "axios": "^1.6.8",
    "framer-motion": "^6.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "cross-env": "^7.0.3",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

这是我的 main.tsx 文件

import React from "react";
import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import theme from "./theme.tsx";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ChakraProvider theme={theme}>
      <ColorModeScript initialColorMode={theme.config.initialColorMode} />
      <App />
      <ReactQueryDevtools />
    </ChakraProvider>
  </React.StrictMode>
);

我尝试安装以前版本的react-query-devtools，但问题仍然存在

Answer 1

可能是软件包安装不正确，请尝试（如果你有NODE）

• npm 卸载@tanstack/react-query-devtools
• npm 我@tanstack/react-query-devtools

然后像这样导入开发工具：

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

将其余组件包裹起来

<QueryClientProvider client={queryClient}> </QueryClientProvider>

在你的情况下它应该看起来像这样

  <QueryClientProvider client={queryClient}>
   {/* The rest of your application */}
   <ReactQueryDevtools initialIsOpen={false} />
 </QueryClientProvider>