fix: Implement dynamic React Query loading to resolve createContext error

- Create QueryProvider component with dynamic React Query import
- Replace static imports with async loading to avoid bundling issues
- Add fallback handling when React Query fails to load
- Ensure React is available globally before loading React Query
- Update both AppRouter and AppWithLoader to use new QueryProvider

This should resolve the persistent "Cannot read properties of undefined (reading 'createContext')" error
by loading React Query after ensuring React context is properly available.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: vchaindz

package-lock.json

@@ -1,23 +1,12 @@
 import { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import QueryProvider from './QueryProvider';
 import Dashboard from './Dashboard';
 import JsonicBenchmark from './JsonicBenchmark';
 import LoadingOverlay from './LoadingOverlay';
 import { setMigrationProgressCallback } from '../services/api-jsonic';
 import { performSimpleMigration } from '../services/simpleMigration';
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      retry: 1,
-      staleTime: 30000, // 30 seconds
-    },
-  },
-});
-
 interface MigrationProgress {
   phase: 'checking' | 'loading' | 'migrating' | 'complete' | 'error' | 'idle';
   current: number;
@@ -119,7 +108,7 @@ export default function AppRouter() {
   const basename = import.meta.env.BASE_URL || '/';
 
   return (
-    <QueryClientProvider client={queryClient}>
+    <QueryProvider>
       <Router basename={basename}>
         {!isReady && !currentPath.includes('/jsonic-bench') && (
           <LoadingOverlay
@@ -132,9 +121,7 @@ export default function AppRouter() {
           <Route path="/" element={isReady ? <Dashboard /> : null} />
           <Route path="/jsonic-bench" element={<JsonicBenchmark />} />
         </Routes>
-        
-        <ReactQueryDevtools initialIsOpen={false} />
       </Router>
-    </QueryClientProvider>
+    </QueryProvider>
   );
 }

public/data/database.jsonic

@@ -1,21 +1,10 @@
 import { useState, useEffect } from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import QueryProvider from './QueryProvider';
 import Dashboard from './Dashboard';
 import LoadingOverlay from './LoadingOverlay';
 import { setMigrationProgressCallback } from '../services/api-jsonic';
 import { checkAndMigrateWorker } from '../services/workerMigration';
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      retry: 1,
-      staleTime: 30000, // 30 seconds
-    },
-  },
-});
-
 interface MigrationProgress {
   phase: 'checking' | 'loading' | 'migrating' | 'complete' | 'error' | 'idle';
   current: number;
@@ -106,15 +95,14 @@ export default function AppWithLoader() {
   }, []);
 
   return (
-    <QueryClientProvider client={queryClient}>
+    <QueryProvider>
       {!isReady && (
         <LoadingOverlay
           {...migrationProgress}
           onComplete={() => setIsReady(true)}
         />
       )}
       {isReady && <Dashboard />}
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
+    </QueryProvider>
   );
 }

public/data/database.jsonic.gz

@@ -0,0 +1,72 @@
+import React, { useState, useEffect, type ReactNode } from 'react';
+
+interface QueryProviderProps {
+  children: ReactNode;
+}
+
+let QueryClient: any = null;
+let QueryClientProvider: any = null;
+let ReactQueryDevtools: any = null;
+
+export default function QueryProvider({ children }: QueryProviderProps) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [queryClient, setQueryClient] = useState<any>(null);
+
+  useEffect(() => {
+    const loadReactQuery = async () => {
+      try {
+        // Ensure React is available before importing
+        if (typeof React === 'undefined') {
+          console.error('React is not available');
+          return;
+        }
+
+        // Dynamic import to avoid bundling issues
+        const [reactQuery, reactQueryDevtools] = await Promise.all([
+          import('@tanstack/react-query'),
+          import('@tanstack/react-query-devtools')
+        ]);
+
+        QueryClient = reactQuery.QueryClient;
+        QueryClientProvider = reactQuery.QueryClientProvider;
+        ReactQueryDevtools = reactQueryDevtools.ReactQueryDevtools;
+
+        const client = new QueryClient({
+          defaultOptions: {
+            queries: {
+              refetchOnWindowFocus: false,
+              retry: 1,
+              staleTime: 30000,
+            },
+          },
+        });
+
+        setQueryClient(client);
+        setIsLoaded(true);
+      } catch (error) {
+        console.error('Failed to load React Query:', error);
+        // Fallback - just render children without query provider
+        setIsLoaded(true);
+      }
+    };
+
+    loadReactQuery();
+  }, []);
+
+  if (!isLoaded) {
+    return <div>Loading...</div>;
+  }
+
+  // If React Query failed to load, just render children
+  if (!QueryClient || !QueryClientProvider || !queryClient) {
+    console.warn('React Query not available, running without query capabilities');
+    return <>{children}</>;
+  }
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      {import.meta.env.DEV && ReactQueryDevtools && <ReactQueryDevtools />}
+    </QueryClientProvider>
+  );
+}

src/components/AppRouter.tsx

@@ -1,5 +1,10 @@
-import { StrictMode } from 'react'
+import React, { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+
+// Ensure React is available globally for libraries that need it
+if (typeof window !== 'undefined') {
+  (window as any).React = React;
+}
 import './index.css'
 import App from './App.tsx'