Tanstack start clerk template crash at first request

[amarant]

Hi,
I tried the template-tanstack-start-clerk, and it crashes at the first request to localhost:3000 with :

template-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17

- If the reference is present on multiple runtimes (isomorphic), you can use the Reference API to map the references.`);this.value=r}},y=class extends Error{constructor(e){super('Unsupported node type "'+e.t+'".')}}
<<a wall of minified JS>>

g [Error]: The value [object Response] of type "object" cannot be parsed/serialized.

There are few workarounds for this problem:
- Transform the value in a way that it can be serialized.
- If the reference is present on multiple runtimes (isomorphic), you can use the Reference API to map the references.
    at G.parseObject (/convex/templates/template-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:31059)
    at G.parse (/convex/templates/template-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:31430)
    at G.parseProperties (/convex/templates/template-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:32428)
    at G.parsePlainObject (/convex/templates/template-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:28700)
    at G.parseObject (/convex/templates/template-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:29897)
    at G.parse (/convex/templates/template-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:31430)
    at G.parseItems (/convex/templates/template-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:27974)
    at G.parseArray (/convex/templates/template-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:28031)
    at G.parseObject (/convex/templates/template-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:29705)
    at G.parse (/convex/templates/template-tanstack-start-clerk/node_modules/.pnpm/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:31430) {

 {
  value: Response {
    routerCode: 'BEFORE_LOAD',
    [Symbol(state)]: {
      aborted: false,
      rangeRequested: false,
      timingAllowPassed: false,
      requestIncludesCredentials: false,
      type: 'default',
      status: 307,
      timingInfo: null,
      cacheState: '',
      statusText: '',
      headersList: HeadersList {
        cookies: [
          '__clerk_redirect_count=1; SameSite=Lax; HttpOnly; Max-Age=3'
        ],
        [Symbol(headers map)]: Map(5) {
          'location' => {
            name: 'location',
            value: 'https://xxx.accounts.dev/v1/client/handshake?redirect_url=http%3A%2F%2Flocalhost%3A3000%2F&__clerk_api_version=2025-04-10&suffixed_cookies=false&__clerk_hs_reason=dev-browser-missing&format=nonce'
          },
          'cache-control' => { name: 'cache-control', value: 'no-store' },
          'set-cookie' => {
            name: 'Set-Cookie',
            value: '__clerk_redirect_count=1; SameSite=Lax; HttpOnly; Max-Age=3'
          },
          'x-clerk-auth-reason' => { name: 'x-clerk-auth-reason', value: 'dev-browser-missing' },
          'x-clerk-auth-status' => { name: 'x-clerk-auth-status', value: 'handshake' }
        },
        [Symbol(headers map sorted)]: null
      },
      urlList: []
    },
    [Symbol(headers)]: Headers {}
  }
}

Node.js v22.11.0

 ELIFECYCLE  Command failed with exit code 1.

[thomasballinger]

@ilkome happen to know what's up? in case #52 broke this. There's also a failing test https://github.com/get-convex/templates/actions/runs/16456985765/job/46516264808

[faribauc]

@thomasballinger Just got that same error. I'm not sure the PR you mention has anything to do with this issue... The getAuth() function in __root.tsx is what's failing and whatever gets thrown inside is not caught properly in the fetchCleckAuth() function. Wrapping the calls in a try...catch statement seems to behave as expected.

const fetchClerkAuth = createServerFn({ method: 'GET' }).handler(async () => {
  const request = getWebRequest()
  if (!request) throw new Error('No request found')

  try {
    const auth = await getAuth(request)
    const token = await auth.getToken({ template: 'convex' })
    return {
      userId: auth.userId,
      token,
    }
  } catch (error) {
    console.log('Error getting auth:', error)
    return {
      userId: null,
      token: null,
    }
  }
})

Maybe the way getAuth() is behaving now changed since the last time this template was updated?

If this is an acceptable fix, I can fork and create a PR. Let me know. :)

[thomasballinger]

Thanks @faribauc, know if there's an announced change in Clerk behavior? (and are we on the latest version?) Would love to take a fix either way, just a nice-to-have would be a note for why this changed.

I'd also like to improve this generally, would be great to pass the token through from the server to client to avoid the initial flash as described in get-convex/convex-react-query#19; not the change to make here but as you're playing with this please let me know if you feel the shortcomings here either of additional delay for this fetch or flash while the auth isn't available.