react-query-devtools and NextJS Output File Tracing mode

[Nargonath]

I have a TypeScript NextJS app that uses Output File Tracing in production. It's not including @tanstack/react-query-devtools in the final bundle but this shouldn't be a problem since it does nothing in production. However the problem is that there is still an import in the code that calls for that package which causes a MODULE_NOT_FOUND error. I tried this to fix the problem:

import {
  QueryClientProvider,
  QueryClient,
  Hydrate,
} from "@tanstack/react-query";

const isDev = process.env.NODE_ENV === "development";

let ReactQueryDevtools = () => null;
if (isDev) {
  ReactQueryDevtools =
    require("@tanstack/react-query-devtools").ReactQueryDevtools;
}

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const { dehydratedState, title, ...restPageProps } = pageProps;
  const [queryClient] = React.useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={dehydratedState}>
          <Layout
            title={title}
            menu={navigation}
            userMenu={userMenu}
            Component={Component}
            pageProps={restPageProps}
          />
      </Hydrate>

      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

But I get an error when I try to run the project:

Unhandled Runtime Error
Error: No QueryClient set, use QueryClientProvider to set one

Call Stack
Object.useQueryClient
node_modules/@tanstack/react-query/build/lib/QueryClientProvider.js (58:0)
ReactQueryDevtoolsPanel
node_modules/@tanstack/react-query-devtools/build/lib/devtools.js (297:0)
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js (16305:0)
updateForwardRef
node_modules/react-dom/cjs/react-dom.development.js (19226:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (21636:0)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (4213:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4277:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (27451:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (26557:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (26466:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (26434:0)
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (25738:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)

I wonder if you can actually mix import with require with react-query or is this gonna cause problem?

[Nargonath]

The problem was that I installed the package @tanstack/react-query-devtools as devDep instead of dep which caused problem with the NextJS Output File Tracing feature.