From b549142b31f5845723bb44c057c9a4bd2df67165 Mon Sep 17 00:00:00 2001 From: Kaan Ozdokmeci Date: Sat, 4 Jan 2025 22:38:00 +0100 Subject: [PATCH 1/3] do not do an explicit router load --- packages/tanstack-start/src/server/middlewareHandler.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/tanstack-start/src/server/middlewareHandler.ts b/packages/tanstack-start/src/server/middlewareHandler.ts index 3faa31b9ea..1eaaf93621 100644 --- a/packages/tanstack-start/src/server/middlewareHandler.ts +++ b/packages/tanstack-start/src/server/middlewareHandler.ts @@ -30,8 +30,6 @@ export function createClerkHandler( router.update({ context: { ...router.options.context, ...clerkInitialState }, }); - - await router.load(); } catch (error) { if (error instanceof Response) { // returning the response From cf1631c019b78ea494c7d89a0111461de6fb0fc5 Mon Sep 17 00:00:00 2001 From: Kaan Ozdokmeci Date: Sat, 4 Jan 2025 22:49:28 +0100 Subject: [PATCH 2/3] use startTransition to fix suspense boundary received an update during hydration errors --- packages/react/src/contexts/ClerkContextProvider.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/react/src/contexts/ClerkContextProvider.tsx b/packages/react/src/contexts/ClerkContextProvider.tsx index 188bc2b3a5..0ab8a67ff3 100644 --- a/packages/react/src/contexts/ClerkContextProvider.tsx +++ b/packages/react/src/contexts/ClerkContextProvider.tsx @@ -28,7 +28,11 @@ export function ClerkContextProvider(props: ClerkContextProvider) { }); React.useEffect(() => { - return clerk.addListener(e => setState({ ...e })); + return clerk.addListener((e: any) => { + React.startTransition(() => { + setState({ ...e }); + }); + }); }, []); const derivedState = deriveState(clerkLoaded, state, initialState); @@ -100,7 +104,11 @@ const useLoadedIsomorphicClerk = (options: IsomorphicClerkOptions) => { }, [options.localization]); React.useEffect(() => { - isomorphicClerk.addOnLoaded(() => setLoaded(true)); + isomorphicClerk.addOnLoaded(() => { + React.startTransition(() => { + setLoaded(true); + }); + }); }, []); React.useEffect(() => { From d62c34c3b5f9c6cb97ca42ea0de8a85a214365f4 Mon Sep 17 00:00:00 2001 From: Kaan Ozdokmeci Date: Wed, 8 Jan 2025 02:28:24 +0100 Subject: [PATCH 3/3] changesets added --- .changeset/green-files-cheat.md | 5 +++++ .changeset/perfect-turtles-do.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/green-files-cheat.md create mode 100644 .changeset/perfect-turtles-do.md diff --git a/.changeset/green-files-cheat.md b/.changeset/green-files-cheat.md new file mode 100644 index 0000000000..33dd322891 --- /dev/null +++ b/.changeset/green-files-cheat.md @@ -0,0 +1,5 @@ +--- +'@clerk/tanstack-start': patch +--- + +TanStack Start loaders will not run twice due to Clerk handler diff --git a/.changeset/perfect-turtles-do.md b/.changeset/perfect-turtles-do.md new file mode 100644 index 0000000000..f476f6145d --- /dev/null +++ b/.changeset/perfect-turtles-do.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-react': patch +--- + +ClerkContextProvider uses React.startTransition for state updates fixing hydration issues for SSR