fix lazy loaded dev tools

JohnDuprey · JohnDuprey · commit b0844f741378 · 2025-05-28T22:59:48.000-04:00
diff --git a/src/pages/_app.js b/src/pages/_app.js
@@ -34,8 +34,8 @@ import { usePathname } from "next/navigation";
 import { useRouter } from "next/router";
 import { persistQueryClient } from "@tanstack/react-query-persist-client";
 import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
+
 TimeAgo.addDefaultLocale(en);
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 const queryClient = new QueryClient();
 const clientSideEmotionCache = createEmotionCache();
@@ -70,7 +70,7 @@ const App = (props) => {
               if (!queryKey || !queryKey.length) {
                 return false;
               }
-              const queryKeyString = String(queryKey[0] || '');
+              const queryKeyString = String(queryKey[0] || "");
               const excludeFromPersisting = excludeQueryKeys.some((key) =>
                 queryKeyString.includes(key)
               );
@@ -132,6 +132,12 @@ const App = (props) => {
     },
   ];
 
+  const ReactQueryDevtoolsProduction = React.lazy(() =>
+    import("@tanstack/react-query-devtools/build/modern/production.js").then((d) => ({
+      default: d.ReactQueryDevtools,
+    }))
+  );
+
   return (
     <CacheProvider value={emotionCache}>
       <Head>
@@ -178,7 +184,7 @@ const App = (props) => {
                       </ThemeProvider>
                       {settings.isInitialized && settings?.showDevtools === true ? (
                         <React.Suspense fallback={null}>
-                          <ReactQueryDevtools />
+                          <ReactQueryDevtoolsProduction />
                         </React.Suspense>
                       ) : null}
                     </>
