Start: SSR context loss due to dependency externalization

[wobsoriano]

Which project does this relate to?

Start

Describe the bug

Packages installed in node_modules rely on sharing a server context with the main application, such as using AsyncLocalStorage for request-scoped data, auth, or other per-request state. If Vite externalizes these packages during SSR (its default behavior), they may be loaded in a separate context, causing them to lose access to the shared server state.

This can result in runtime errors like:

Error: No HTTPEvent found in AsyncLocalStorage. Make sure you are using the function within the server runtime.
    at getEvent (node_modules/@tanstack/start-server-core/dist/esm/h3.js:30:11)
    ...

Temporary Workaround:

Add the affected package to the ssr.noExternal option in your vite.config.ts file:

export default defineConfig({
  // ...other config
  ssr: {
    noExternal: ['@clerk/tanstack-react-start'],
  },
});

Your Example Website or App

https://codesandbox.io/p/devbox/mdxyzw

Steps to Reproduce the Bug or Issue

1. Create a fresh devinxi based TanStack Start app
2. Install Clerk SDK with devinxi support (npm i @clerk/[email protected] --save-exact)
3. Run npm run dev
4. Check console

or visit the codesandbox link

Expected behavior

Packages that depend on shared server context should function correctly during SSR, with no loss of context or unexpected errors, even if they are installed in node_modules.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome

Additional context

No response

[solace]

@wobsoriano Out of interest, even with the noExternal, the SignedIn and SignedOut work, but the UserButton, and SignInButton don't render, and SignOutButton renders but does nothing. Is this expected at the moment while this issue is being sorted out?

[solace]

@wobsoriano Out of interest, even with the noExternal, the SignedIn and SignedOut work, but the UserButton, and SignInButton don't render, and SignOutButton renders but does nothing. Is this expected at the moment while this issue is being sorted out?

Started from scratch and added everything back in one at a time. Looks like it was lingui integration based on their tanstack starter that was causing Clerk to fail.

[depsimon]

@solace I just updated the lingui example here, let me know if you have any issues with it

[vcheeze]

@depsimon I just tried out Tanstack Start for the first time today using the start-clerk-basic example, and I encountered the same error @wobsoriano mentioned without modifying anything in the example. I believe you'll see the same error by just going to the example's StackBlitz link.

What is the recommended fix for this? Is it to apply the ssr. noExternal config, or is a more drastic change required or better?

[schiller-manuel]

@vcheeze this is just caused by stackblitz not support async local storage.

[thereis]

I got this error as well in localhost while trying to use with orpc, this happens when I import getWebRequest.

import { getWebRequest } from '@tanstack/react-start/server';

[schiller-manuel]

@thereis can you please share a complete reproducer?

[vcheeze]

@schiller-manuel same here - I just ran the command to create a new project using the template, and got the same error on localhost.

[mags-sully]

The ssr noexternal workaround for clerk fixes my local dev issue as well

[tomleadbetter]

We have a project which was based on this starter: https://clerk.com/docs/quickstarts/tanstack-react-start We have issues with FOUC and upgrading to newer versions of tanstack. The tanstack Clerk starter is quite different (vite, no vinxi).

I understand this is beta but is there a timeline for aligning the starter kits? Or getting the Clerk one using the latest Tanstack version?

[vcheeze]

We have a project which was based on this starter: https://clerk.com/docs/quickstarts/tanstack-react-start We have issues with FOUC and upgrading to newer versions of tanstack. The tanstack Clerk starter is quite different (vite, no vinxi).

I understand this is beta but is there a timeline for aligning the starter kits? Or getting the Clerk one using the latest Tanstack version?

@tomleadbetter I believe the plan was always to move from vinxi to vite, so I believe the Clerk starter is newer and more conformed to the potential official version.

[tomleadbetter]

Thanks @vcheeze I'll start with a clean project and see what happens.

[tomleadbetter]

@wobsoriano @vcheeze this repo https://github.com/clerk/clerk-tanstack-react-start-quickstart still uses vinxi. Am I in the right place?

[depsimon]

It's still in a branch I believe.

[tomleadbetter]

It's still in a branch I believe.

Thanks @depsimon I'll keep an eye on the situation then rather than dive into it. Looks like a few moving parts.

[wobsoriano]

It's still in a branch I believe.

Thanks @depsimon I'll keep an eye on the situation then rather than dive into it. Looks like a few moving parts.

That branch is now merged 👍🏼

[vcheeze]

@depsimon I just tried out Tanstack Start for the first time today using the start-clerk-basic example, and I encountered the same error @wobsoriano mentioned without modifying anything in the example. I believe you'll see the same error by just going to the example's StackBlitz link.

What is the recommended fix for this? Is it to apply the ssr. noExternal config, or is a more drastic change required or better?

Thanks @wobsoriano. Any ideas about this issue in the Clerk example?

[wobsoriano]

@depsimon I just tried out Tanstack Start for the first time today using the start-clerk-basic example, and I encountered the same error @wobsoriano mentioned without modifying anything in the example. I believe you'll see the same error by just going to the example's StackBlitz link. What is the recommended fix for this? Is it to apply the ssr. noExternal config, or is a more drastic change required or better?

Thanks @wobsoriano. Any ideas about this issue in the Clerk example?

I'm updating the starter here https://github.com/TanStack/router/pull/4392

[kusiewicz]

FYI guys the same problem occurs when I'm using @tanstack/react-forms.

I get the same error, and stack trace points to tanstack-forms.

[Suver1]

I got the same error when following the @tanstack/react-forms SSR guide with TanStack Start, along with a few TS errors (see README) in this minimal example: https://stackblitz.com/~/github.com/Suver1/tanstack-start-with-form-bug

[Earnstein]

I got the same error when following the @tanstack/react-forms SSR guide with TanStack Start, along with a few TS errors (see README) in this minimal example: https://stackblitz.com/~/github.com/Suver1/tanstack-start-with-form-bug

Encountered the same issue with the tanstack form SSR guide, curious to know if you’ve found a fix.

[MrBlue9]

I got the same error when following the @tanstack/react-forms SSR guide with TanStack Start, along with a few TS errors (see README) in this minimal example: https://stackblitz.com/~/github.com/Suver1/tanstack-start-with-form-bug

Encountered the same issue with the tanstack form SSR guide, curious to know if you’ve found a fix.

@Earnstein Did you get this fixed somehow? I'm kind of confused, as I get the same error message and this issue was closed as completed last week but I still get the error with everything updated to the latest version.

[schiller-manuel]

@MrBlue9 can you please create a new GitHub issue including a complete reproducer?

[MrBlue9]

@schiller-manuel I tried setting up a minimal example on Stackblitz with the tanstack libraries I use for my project. Even before getting to set up a basic form to reproduce my issue I get the aforementioned error message about AsyncLocalStorage. I'm not sure if I made a mistake during set up or if there is an underlying issue in one of the libraries (I guess it's the former, otherwise there would probably be many more open issues about this): https://stackblitz.com/edit/vitejs-vite-o7sovvfn