React Query devtools not showing

I am currently using react query in my project but the devtools Icon is not showing up anywhere on my screen. There are no errors in the console too. I am currently following a tutorial from youtube

Below is my package.json I have installed the latest versions too. But I can't seem to figure out the problem.

Package.json

{
  "name": "react-query-starter",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@tanstack/react-query": "^4.0.10",
    "@tanstack/react-query-devtools": "^4.0.10",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "json-server": "^0.16.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "serve-json": "json-server --watch db.json --port 4000"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

App.js

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"
import "./App.css"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import { HomePage } from "./components/Home.page"
import { RQSuperHeroesPage } from "./components/RQSuperHeroes.page"
import { SuperHeroesPage } from "./components/SuperHeroes.page"

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/super-heroes">Traditional Super Heroes</Link>
              </li>
              <li>
                <Link to="/rq-super-heroes">RQ Super Heroes</Link>
              </li>
            </ul>
          </nav>
          <Switch>
            <Route path="/super-heroes">
              <SuperHeroesPage />
            </Route>
            <Route path="/rq-super-heroes">
              <RQSuperHeroesPage />
            </Route>
            <Route path="/">
              <HomePage />
            </Route>
          </Switch>
        </div>
      </Router>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

export default App

Upvotes: 5

Answers (4)

Vanessa M

Reputation: 1

I'm having the same issue where I'm not able to view the dev tools console. Below is my package.json file. I'm not sure if it's something related to the webpack or rollup setup, but I couldn't find anything that looked like it would prevent it from displaying.

{
  "name": "mas-ui",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test"
  },
  "private": true,
  "dependencies": {
    "@babel/preset-typescript": "^7.18.6",
    "@capacitor/app": "^4.1.1",
    "@capacitor/core": "^4.6.3",
    "@capacitor/haptics": "^4.1.0",
    "@capacitor/keyboard": "^4.1.1",
    "@capacitor/local-notifications": "^4.1.5",
    "@capacitor/status-bar": "^4.1.1",
    "@capacitor/storage": "^1.2.5",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@ionic-enterprise/identity-vault": "^5.9.6",
    "@ionic/react": "^6.5.3",
    "@mui/material": "^5.11.8",
    "@mui/x-data-grid": "^5.17.24",
    "@tanstack/react-query": "^4.23.0",
    "@tanstack/react-query-devtools": "^4.0.11-beta.0",
    "axios": "^1.2.3",
    "core-js": "^3.28.0",
    "ionicons": "^6.1.3",
    "luxon": "^3.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.43.1",
    "react-router": "^6.8.1",
    "react-router-dom": "^6.7.3",
    "regenerator-runtime": "^0.13.11",
    "tslib": "^2.3.0"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.14.5",
    "@capacitor/cli": "^4.6.3",
    "@nrwl/cypress": "^15.6.3",
    "@nrwl/eslint-plugin-nx": "15.6.3",
    "@nrwl/jest": "15.6.3",
    "@nrwl/js": "15.6.3",
    "@nrwl/linter": "15.6.3",
    "@nrwl/react": "15.6.3",
    "@nrwl/rollup": "^15.6.3",
    "@nrwl/webpack": "15.6.3",
    "@nrwl/workspace": "15.6.3",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
    "@rollup/plugin-url": "^7.0.0",
    "@svgr/rollup": "^6.1.2",
    "@svgr/webpack": "^6.1.2",
    "@testing-library/react": "13.4.0",
    "@types/jest": "28.1.1",
    "@types/luxon": "^3.2.0",
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.9",
    "@types/react-router-dom": "5.3.3",
    "@typescript-eslint/eslint-plugin": "^5.36.1",
    "@typescript-eslint/parser": "^5.36.1",
    "babel-jest": "28.1.1",
    "cypress": "^12.2.0",
    "eslint": "~8.15.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsx-a11y": "6.6.1",
    "eslint-plugin-react": "7.31.11",
    "eslint-plugin-react-hooks": "4.6.0",
    "jest": "28.1.1",
    "jest-environment-jsdom": "28.1.1",
    "nx": "15.6.3",
    "prettier": "^2.6.2",
    "react-refresh": "^0.10.0",
    "react-test-renderer": "18.2.0",
    "ts-jest": "28.0.5",
    "ts-node": "10.9.1",
    "typescript": "~4.8.2",
    "url-loader": "^4.1.1"
  }
}

Upvotes: 0

TkDodo

Reputation: 28938

We're still trying to figure out a couple of bundling issues around the devtools and ESM support. Mainly, older bundlers like react-scripts v4 incorrectly pick up the wrong build. If you switch to react-scripts v5 (which came out more than 6 months ago) or something more modern like vite, things work fine. All our example use vite so you can see how we do it there.

We recently made a beta version that should address it, but it still has some issues and we're trying to figure it out here: https://github.com/TanStack/query/issues/3882

tl;dr: bundling is hard, sorry for the issues.

Upvotes: 1