Skip to content

Question: Is createIsomorphicFn intended to work at module top-level? #6217

@mountain1009

Description

@mountain1009

Question

Is createIsomorphicFn intended to work when called at module top-level?

I noticed that it returns a function instead of the expected value when called at module top-level, but works correctly when called inside a function scope (components, server functions, loaders).

Reproduction

https://github.com/mountain1009/tanstack-start-isomorphic-bug

pnpm install
pnpm dev
# Open http://localhost:5173

Observed Behavior

Call Location Result Status
Module top-level Returns [Function]
Inside Component Returns "server" / "client" ✅ Works
Inside Server Function Returns "server" ✅ Works
Inside Loader Returns "server" ✅ Works

Code Example

import { createIsomorphicFn } from "@tanstack/react-start";

const getEnvironment = createIsomorphicFn()
  .server(() => "server")
  .client(() => "client");

// Module top-level: returns [Function] instead of "server"
const moduleLevel = getEnvironment();
console.log(typeof moduleLevel); // "function" ❓

function MyComponent() {
  // Inside function: works correctly
  const env = getEnvironment();
  console.log(typeof env); // "string" ✅
}

My Use Case

I was trying to initialize an oRPC client at module top-level:

const getORPCClient = createIsomorphicFn()
  .server(() => createRouterClient(...))
  .client(() => createORPCClient(...));

const client = getORPCClient(); // Returns function, not client
export const orpc = createTanstackQueryUtils(client); // Fails

Questions

  1. Is module top-level usage supported?
  2. If not, could this limitation be documented?
  3. Is there a recommended pattern for initializing isomorphic singletons?

Workaround

Using manual environment detection works:

function getORPCClient() {
  if (typeof window === "undefined") {
    return createRouterClient(...);
  }
  return createORPCClient(...);
}

Environment

  • @tanstack/react-start: 1.143.6
  • @cloudflare/vite-plugin: 1.0.0+
  • Vite: 7.0.0

Thank you!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions