ReactQueryDevtools not rendering in development, but ReactQueryDevtoolsProduction does

[noellered]

I am using jotai-tanstack-query and when I try to use <ReactQueryDevtools /> from @tanstack/react-query-devtools, it does not render. It is not even appearing in the DOM.

Things I've tried:

• logging process.env.NODE_ENV where I'm using the component and it is, in fact, development.
• specifying the client, however that does nothing different.
• ensuring the package is installed a dev dependency

I am able to use ReactQueryDevtoolsProduction by lazy loading and using like so:

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

const ReactQueryDevtoolsWrapper: typeof ReactQueryDevtools = props => {
  const queryClient = useAtomValue(queryClientAtom);
  if (process.env.NODE_ENV !== "development") return null;
  return <ReactQueryDevtoolsProduction client={queryClient} {...props} />;
};

const MyComponent = () => {
  return (
    <>
      <div> Something here... </div>
      <ReactQueryDevtoolsWrapper /> <-- this renders as expected
    </>
  );
};

Any ideas what could be the issue here?

[kevinashworth]

I'm here because suddenly my app doesn't load <ReactQueryDevtools /> from @tanstack/react-query-devtools either, after months of successful use. ('Suddenly' meaning, when I go to look at the dev tools for the first time in a few weeks.)

Lazy loading does not work for me, however, so I'm in a worse spot than you. Did you find a cause?

[noellered]

I unfortunately did not find a cause. Are you seeing any errors when lazy loading or is it just not showing up like the non-production devtools?

[kevinashworth]

Thank you, I was able to get it to work. (It was a separate issue. IIRC, the update that introduced PiP effectively hid the tools from users that had already used tools with a certain setting before the update.)

[noellered]

Oh, that's great! Did this work for the non-production tools as well?