Unable to use @clerk/tanstack-start w/ Cloudflare deployment or local development

[pdlug]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/pdlug/tanstack-start-clerk

Publishable key

pk_test_bWFzc2l2ZS10ZXJtaXRlLTY1LmNsZXJrLmFjY291bnRzLmRldiQ

Description

I'm using Tanstack Start with the @clerk/tanstack-start package and trying to get it to work when deploying to Cloudflare. It works great running locally with the vinxi dev server but I cannot get it to pick up the publishable and secret keys when running locally with Cloudflare's wrangler CLI or in an actual deployment even though I have them set.

Steps to reproduce:

See this minimal repo that reproduces the issue: https://github.com/pdlug/tanstack-start-clerk

1. Created a new Tanstack Start project using the instructions
2. Added @clerk/tanstack-start with config updates specified in the docs
3. Run local development server, visit http://localhost:3000 and see that Clerk auth and components work as expected
4. Build and use wrangler pages dev to preview the app locally. Loading the app you'll get a 500 error with @clerk/tanstack-start: Clerk: no secret key provided in the console.

I've added the CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY to .dev.vars which is what wrangler uses to set environment variables running locally but that didn't work. I also set them as environment variables (secrets) in a Cloudflare deployment and deployed. I get the same error when running live in Cloudflare as I do locally.

It looks like I can pass the publishable and secret keys to createClerkHandler but I haven't figured out how to actually get those from the environment. Cloudflare exposes them on the context which is called when the handler runs so I'm thinking the issue may be that the code in @clerk/tanstack-start seems to rely on it being in import.meta.env at the time it's loaded.

Tanstack Start uses Vinxi with Nitro to abstract the webserver. My knowledge of both is rather limited.

Expected behavior:

Expected @clerk/tanstack-start to pick up the configured environment variables running in a Cloudflare deployment.

Actual behavior:

500 error with the console message:

✘ [ERROR] [nitro] [request error] [unhandled] @clerk/tanstack-start: Clerk: no secret key provided

Environment

System:
    OS: macOS 15.1
    CPU: (14) arm64 Apple M4 Pro
    Memory: 150.61 MB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.asdf/installs/nodejs/22.11.0/bin/node
    npm: 10.9.0 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 9.14.2 - ~/.asdf/installs/pnpm/9.14.2/bin/pnpm
    bun: 1.1.36 - ~/.bun/bin/bun
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 18.1
  npmPackages:
    @clerk/tanstack-start: ^0.5.2 => 0.5.2
    @tanstack/react-router: ^1.82.2 => 1.82.2
    @tanstack/start: ^1.82.5 => 1.82.5
    @types/react: ^18.3.12 => 18.3.12
    @types/react-dom: ^18.3.1 => 18.3.1
    @vitejs/plugin-react: ^4.3.3 => 4.3.3
    prettier: ^3.3.3 => 3.3.3
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript: ^5.6.3 => 5.6.3
    unenv: ^1.10.0 => 1.10.0
    vinxi: ^0.4.3 => 0.4.3
    wrangler: ^3.89.0 => 3.89.0