Skip to content

Supabase Query Builder Hangs Indefinitely on Windows 11 + Vite + React 19 #1620

@madmichael

Description

@madmichael

Describe the bug

Supabase JS client query builder creates query objects successfully but the promise never resolves when awaited. No HTTP request is sent, and the query hangs indefinitely (no timeout, just infinite wait).

Library affected

supabase-js

Reproduction

No response

Steps to reproduce

  1. Create Supabase client:
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);
  1. Attempt to query using standard pattern:
const { data, error, count } = await supabase
  .from('events')
  .select('*', { count: 'exact' })
  .order('start_date', { ascending: true })
  .range(0, 19);
  1. Result: Promise never resolves, query hangs indefinitely

System Info

### Operating System
- **OS**: Microsoft Windows 11 Home
- **Version**: 10.0.26100

### Package Versions
- **@supabase/supabase-js**: 2.58.0
- **React**: 19.2.0
- **React DOM**: 19.2.0
- **Vite**: 7.1.9
- **Node.js**: v22.18.0
- **@vitejs/plugin-react**: 5.0.4

### Build Tool
- Vite 7.1.9 with TypeScript
- Target: ESNext

Used Package Manager

npm

Logs

What Happens

  1. ✅ Query object builds successfully
  2. ✅ Query object has correct URL property: https://[project].supabase.co/rest/v1/events?select=*&order=start_date.asc&offset=0&limit=20
  3. ✅ Query object has correct method: GET
  4. Headers object is EMPTY: Headers {}
  5. await query hangs forever (no timeout, no error, no response)
  6. Network tab shows NO HTTP request is sent
  7. ❌ No errors in console
  8. ❌ No network errors

What Works

Direct fetch() to the EXACT same URL works perfectly:

const directUrl = query.url?.toString();
const directResponse = await fetch(directUrl, {
  headers: {
    'apikey': import.meta.env.VITE_SUPABASE_ANON_KEY,
    'Authorization': `Bearer ${import.meta.env.VITE_SUPABASE_ANON_KEY}`,
    'Content-Type': 'application/json',
    'Prefer': 'count=exact'
  }
});
const data = await directResponse.json(); // ✅ Works perfectly, returns data

Key Evidence

1. Headers Object is Empty

When inspecting the query object before execution:

console.log('Query headers:', query.headers);
// Output: Headers {}  <-- EMPTY, should contain apikey and authorization

2. Custom Fetch Test

Added custom fetch to client config to debug:

const customFetch = (url, options) => {
  console.log('[Supabase] Custom fetch called:', url);
  return fetch(url, options);
};

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  global: {
    fetch: customFetch,
  },
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: true,
  },
});

Result:

  • ✅ Custom fetch IS called for auth: [Supabase] Custom fetch called: https://[project].supabase.co/auth/v1/token?grant_type=refresh_token
  • ❌ Custom fetch is NEVER called for queries (no log appears for /rest/v1/events)

Conclusion: The query builder fails during promise construction, BEFORE it attempts to call fetch.

Attempted Fixes (None Worked)

1. Reinstalling Packages

npm uninstall @supabase/supabase-js
npm install @supabase/supabase-js@latest
# Deleted node_modules and package-lock.json
npm install

Result: No change

2. Minimal Client Config

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Result: No change

3. Custom Fetch Implementation

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  global: {
    fetch: customFetch,
  }
});

Result: Fetch is called for auth but NOT for queries

4. Vite Configuration

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['@supabase/supabase-js'],
    esbuildOptions: {
      target: 'esnext'
    }
  },
  build: {
    target: 'esnext'
  }
})

Result: No change

5. Different Query Patterns

Tried:

  • Simple select: supabase.from('events').select('*')
  • With filters: supabase.from('events').select('*').eq('id', '123')
  • With single: supabase.from('events').select('*').single()
  • Different tables
    Result: ALL queries hang

Expected Behavior

The query promise should resolve with { data, error, count } within a reasonable timeframe, just like the direct fetch does.

Actual Behavior

The query promise never resolves. No HTTP request is sent. The application hangs waiting for the promise indefinitely.

Impact

  • Severity: Critical - All database queries are unusable
  • Workaround: Using direct fetch with query.url (not ideal, requires accessing protected properties)
  • Scope: Affects all SELECT queries on Windows 11 with Vite + React 19

Additional Context

Browser Testing

Tested in:

  • Chrome (latest)
  • Edge (latest)
  • Firefox (latest)

Result: Same issue in all browsers

React Query Integration

Using @tanstack/react-query 5.90.2:

const { data, isLoading, error } = useQuery({
  queryKey: ['events'],
  queryFn: () => eventsService.getEvents(),
});

Query remains in isLoading: true state forever.

Network Inspection

Using Chrome DevTools Network tab:

  • No request to /rest/v1/events appears
  • Only auth-related requests appear (/auth/v1/token)

RLS Policies

All RLS policies are correctly configured (verified by running direct SQL queries in Supabase dashboard, which return data successfully).

Workaround Currently Using

// Build query to get the URL and parameters
const query = supabase
  .from('events')
  .select('*', { count: 'exact' })
  .order('start_date', { ascending: true })
  .range(0, 19);

// Access protected URL property
// @ts-ignore
const directUrl = query.url?.toString();

// Execute with direct fetch
const directResponse = await fetch(directUrl, {
  headers: {
    'apikey': import.meta.env.VITE_SUPABASE_ANON_KEY,
    'Authorization': `Bearer ${import.meta.env.VITE_SUPABASE_ANON_KEY}`,
    'Content-Type': 'application/json',
    'Prefer': 'count=exact'
  }
});

const data = await directResponse.json();

This works but:

  1. Requires accessing protected url property
  2. Bypasses Supabase's built-in transformations
  3. Returns snake_case instead of camelCase
  4. Not sustainable for production

Questions

  1. Why would the Headers object be empty when the query is built?
  2. Why does custom fetch work for auth but not for queries?
  3. Is there a specific Windows/Vite/React 19 compatibility issue?
  4. Is there additional debugging we can enable to see why the promise never resolves?

Request

Please investigate why the query builder promise construction fails on Windows 11 with Vite + React 19. This appears to be an environment-specific issue that makes the Supabase JS client completely unusable without workarounds.

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions