vicious-gold

dev tool not showing in nextjs deployment

i followed how it's done here https://tanstack.com/query/v4/docs/react/devtools

Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! ðŸ¥³ When you begin your React Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch!

2 Replies

deep-jade•3y ago

Can you show the code? Is that a prod environment and if so, did you follow this paragraph to show the devtools which are excluded in prod builds? https://tanstack.com/query/v4/docs/react/devtools#devtools-in-production

Devtools | TanStack Query Docs

vicious-goldOP•3y ago

I manage to solve it by removing some code lol

import { ClerkProvider } from "@clerk/nextjs";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import type { NextPage } from "next";
import { type AppProps, type AppType } from "next/app";
import { type ReactElement, type ReactNode } from "react";
import { api } from "~/utils/api";

import React from "react";
import "~/styles/globals.css";

export type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import("@tanstack/react-query-devtools/build/lib/index.prod.js").then(
    (d) => ({
      default: d.ReactQueryDevtools,
    })
  )
);

const MyApp: AppType = ({
  Component,
  pageProps: { ...pageProps },
}: AppPropsWithLayout) => {
  const getLayout = Component.getLayout ?? ((page) => page);
  const layout = getLayout(<Component {...pageProps} />);

  return (
    <ClerkProvider {...pageProps}>
      {layout}
      <ReactQueryDevtools initialIsOpen />
      <React.Suspense fallback={null}>
        <ReactQueryDevtoolsProduction />
      </React.Suspense>
    </ClerkProvider>
  );
};

export default api.withTRPC(MyApp);

import { ClerkProvider } from "@clerk/nextjs";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import type { NextPage } from "next";
import { type AppProps, type AppType } from "next/app";
import { type ReactElement, type ReactNode } from "react";
import { api } from "~/utils/api";

import React from "react";
import "~/styles/globals.css";

export type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import("@tanstack/react-query-devtools/build/lib/index.prod.js").then(
    (d) => ({
      default: d.ReactQueryDevtools,
    })
  )
);

const MyApp: AppType = ({
  Component,
  pageProps: { ...pageProps },
}: AppPropsWithLayout) => {
  const getLayout = Component.getLayout ?? ((page) => page);
  const layout = getLayout(<Component {...pageProps} />);

  return (
    <ClerkProvider {...pageProps}>
      {layout}
      <ReactQueryDevtools initialIsOpen />
      <React.Suspense fallback={null}>
        <ReactQueryDevtoolsProduction />
      </React.Suspense>
    </ClerkProvider>
  );
};

export default api.withTRPC(MyApp);

this works in my previews for vercel depolyments I'm using T3 stack with clerk

Gaming

Programming

dev tool not showing in nextjs deployment

Did you find this page helpful?