fix: use dynamic import for ReactQueryDevtools to fix consumer builds

The static import of @tanstack/react-query-devtools caused consumer builds
to fail since the package is in devDependencies and not installed by consumers.

Replaced with a process.env.NODE_ENV-guarded React.lazy call so the consumer's
webpack dead-code-eliminates the import in production builds.

Closes #143

Co-Authored-By: Claude <noreply@anthropic.com>

Author: arbrandes

src/Main.tsx

@@ -1,13 +1,20 @@
+import { lazy, Suspense } from 'react';
 import { CurrentAppProvider, getAppConfig } from '@openedx/frontend-base';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Outlet } from 'react-router-dom';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { AlertProvider } from './providers/AlertProvider';
 import { appId } from './constants';
 import PageWrapper from './pageWrapper/PageWrapper';
 
 import './app.scss';
 
+// Use a dynamic import guarded by process.env.NODE_ENV so the consumer's
+// webpack dead-code-eliminates this in production builds, meaning
+// @tanstack/react-query-devtools does not need to be installed by consumers.
+const ReactQueryDevtools = process.env.NODE_ENV === 'development'
+  ? lazy(() => import('@tanstack/react-query-devtools').then((m) => ({ default: m.ReactQueryDevtools })))
+  : null;
+
 const queryClient = new QueryClient();
 
 const Main = () => (
@@ -18,7 +25,11 @@ const Main = () => (
           <PageWrapper>
             <Outlet />
           </PageWrapper>
-          { getAppConfig(appId).NODE_ENV === 'development' && <ReactQueryDevtools initialIsOpen={false} /> }
+          {ReactQueryDevtools && getAppConfig(appId).NODE_ENV === 'development' && (
+            <Suspense fallback={null}>
+              <ReactQueryDevtools initialIsOpen={false} />
+            </Suspense>
+          )}
         </main>
       </AlertProvider>
     </QueryClientProvider>