T
TanStack•6mo ago
optimistic-gold

ClerkHandler type (Clerk+Convex+TSS) error when moving to alpha branch

Cross post from a thread in the general chat, but I believe this might be a larger error so I'm publishing here. Let me know if you all would like me to submit a github issue. Error: Within server.tsx: 
 Type 'RequestHandler' is not assignable to type 'EventHandler<EventHandlerRequest, any>'.
    Types of parameters 'ctx' and 'event' are incompatible.
      Property 'request' is missing in type 'H3Event<EventHandlerRequest>' but required in type '{ request: Request; }'
 Type 'RequestHandler' is not assignable to type 'EventHandler<EventHandlerRequest, any>'.
    Types of parameters 'ctx' and 'event' are incompatible.
      Property 'request' is missing in type 'H3Event<EventHandlerRequest>' but required in type '{ request: Request; }'
This previously leverage 'getRouterManifest' but this package was removed on alpha. Here's the server.tsx config that's throwing: 
import {
  createStartHandler,
  defaultStreamHandler,
} from "@tanstack/react-start/server";
import { getRouterManifest } from "@tanstack/react-start/router-manifest";
import { createRouter } from "./router";
import { createClerkHandler } from "@clerk/tanstack-react-start/server";

export default createClerkHandler(
  createStartHandler({
    createRouter,
    getRouterManifest,
  })
)(defaultStreamHandler);
import {
  createStartHandler,
  defaultStreamHandler,
} from "@tanstack/react-start/server";
import { getRouterManifest } from "@tanstack/react-start/router-manifest";
import { createRouter } from "./router";
import { createClerkHandler } from "@clerk/tanstack-react-start/server";

export default createClerkHandler(
  createStartHandler({
    createRouter,
    getRouterManifest,
  })
)(defaultStreamHandler);
4 Replies
optimistic-gold
optimistic-goldOP•6mo ago
Here's my router config: 
import { createRouter as createTanStackRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
import { DefaultCatchBoundary } from "./components/DefaultCatchBoundary";
import { NotFound } from "./components/NotFound";
import { routerWithQueryClient } from "@tanstack/react-router-with-query";
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { ConvexQueryClient } from "@convex-dev/react-query";
import { QueryClient } from "@tanstack/react-query";

export function createRouter() {
  const CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL!;
  if (!CONVEX_URL) {
    throw new Error("missing VITE_CONVEX_URL environment variable");
  }
  const convex = new ConvexReactClient(CONVEX_URL, {
    unsavedChangesWarning: false,
  });
  const convexQueryClient = new ConvexQueryClient(convex);

  const queryClient: QueryClient = new QueryClient({
    defaultOptions: {
      queries: {
        queryKeyHashFn: convexQueryClient.hashFn(),
        queryFn: convexQueryClient.queryFn(),
      },
    },
  });
  convexQueryClient.connect(queryClient);

  const router = routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      defaultPreload: "intent",
      defaultErrorComponent: DefaultCatchBoundary,
      defaultNotFoundComponent: () => <NotFound />,
      context: { queryClient, convexClient: convex, convexQueryClient },
      Wrap: ({ children }) => (
        <ConvexProvider client={convexQueryClient.convexClient}>
          {children}
        </ConvexProvider>
      ),
    }),
    queryClient
  );

  return router;
}

declare module "@tanstack/react-router" {
  interface Register {
    router: ReturnType<typeof createRouter>;
  }
}
import { createRouter as createTanStackRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
import { DefaultCatchBoundary } from "./components/DefaultCatchBoundary";
import { NotFound } from "./components/NotFound";
import { routerWithQueryClient } from "@tanstack/react-router-with-query";
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { ConvexQueryClient } from "@convex-dev/react-query";
import { QueryClient } from "@tanstack/react-query";

export function createRouter() {
  const CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL!;
  if (!CONVEX_URL) {
    throw new Error("missing VITE_CONVEX_URL environment variable");
  }
  const convex = new ConvexReactClient(CONVEX_URL, {
    unsavedChangesWarning: false,
  });
  const convexQueryClient = new ConvexQueryClient(convex);

  const queryClient: QueryClient = new QueryClient({
    defaultOptions: {
      queries: {
        queryKeyHashFn: convexQueryClient.hashFn(),
        queryFn: convexQueryClient.queryFn(),
      },
    },
  });
  convexQueryClient.connect(queryClient);

  const router = routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      defaultPreload: "intent",
      defaultErrorComponent: DefaultCatchBoundary,
      defaultNotFoundComponent: () => <NotFound />,
      context: { queryClient, convexClient: convex, convexQueryClient },
      Wrap: ({ children }) => (
        <ConvexProvider client={convexQueryClient.convexClient}>
          {children}
        </ConvexProvider>
      ),
    }),
    queryClient
  );

  return router;
}

declare module "@tanstack/react-router" {
  interface Register {
    router: ReturnType<typeof createRouter>;
  }
}
rival-black
rival-black•6mo ago
We're still working on updating the Clerk TanStack Start package, but you can try this version 
npm i @clerk/tanstack-react-start@0.17.0-snapshot.v20250611045520 --save-exact
npm i @clerk/tanstack-react-start@0.17.0-snapshot.v20250611045520 --save-exact
You'll get an error related to AsyncLocalStorage. The fix is in this thread
optimistic-gold
optimistic-goldOP•6mo ago
Just shipped out to prod - not sure if I'm ready to really ride dirty on the alpha branch quite yet, but thank you for the link! I might take a looksie on my dev branch 🙂
rival-black
rival-black•6mo ago
We’ll release the devinxi version soon 😁

Did you find this page helpful?