dev tool not showing in nextjs deployment

[serene fiber]

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

[silk flower]

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

[serene fiber]

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);

this works in my previews for vercel depolyments