React Router v7 with SSR node:https development bundle

[bjacobso]

[BUG] node:https included in client bundle during development with React Query +
Convex integration

Environment

• Framework: React Router v7 (Remix successor)
• Bundler: Vite 6.3.5
• Deployment: Cloudflare Workers
• React Query: v5.62.8
• Convex: v1.24.8
• Node: [Your version]
• Package Manager: pnpm

Description

After upgrading to React Query v5 and implementing Convex integration, node:https
is being included in the client bundle during development, causing build/runtime
errors. This appears to be related to server-side code paths in the Convex React
Query integration being included in the client bundle.

Expected Behavior

The client bundle should not include Node.js-specific modules like node:https and
should work seamlessly in the browser during development.

Actual Behavior

node:https is being bundled into the client code, causing development build
failures or runtime errors in the browser.

Steps to Reproduce

1. Set up React Router v7 app with Vite
2. Install @tanstack/react-query v5.62.8 and convex v1.24.8
3. Integrate Convex with React Query using standard patterns
4. Run development server
5. Observe node:https being included in client bundle

Current Workaround

Created a local copy of @convex-dev/react-query integration in
apps/web/app/lib/convex-react-query.ts with the following changes:

1. Removed convex/browser dependency - commented out ConvexHttpClient import
2. Disabled server-side code paths - commented out all isServer conditional logic
   for SSR
3. Simplified client-only implementation - removed server HTTP client
   instantiation and SSR query handling

Key changes in the workaround:

// Commented out problematic imports
// import { ConvexHttpClient } from "convex/browser";

// Disabled server-side logic
const isServer = typeof window === "undefined";
// if (isServer) {
//   this.serverHttpClient = new ConvexHttpClient(this.convexClient.url);
// }

// Disabled SSR query execution
if (isServer) {
  // if (this.ssrQueryMode === "consistent") {
  //   return await this.serverHttpClient!.consistentQuery(func, args);
  // } else {
  //   return await this.serverHttpClient!.query(func, args);
  // }
} else {
  return await this.convexClient.query(func, args);
}

Root Cause Analysis Needed

The issue likely stems from:

1. Vite bundling behavior - Server-side imports being included in client bundles
2. Convex React Query integration - SSR code paths not being properly tree-shaken
3. Import resolution - convex/browser or related imports pulling in Node.js
   dependencies

Potential Solutions

1. Improve Vite configuration - Better define server vs client boundaries
2. Update Convex React Query package - Ensure proper conditional exports and
   tree-shaking
3. Add proper polyfills - If node:https is actually needed, provide
   browser-compatible alternatives
4. Environment-specific builds - Separate client and server build configurations

Additional Context

• This is a React Router v7 (successor to Remix) application
• Deployed to Cloudflare Workers (edge runtime)
• Using pnpm workspaces in a monorepo structure
• The workaround successfully unblocks development but is not ideal for
  production

[swarajbachu]

similar issue in nextjs + cloudflare