Skip to content

Instantly share code, notes, and snippets.

@xixixao
Created July 24, 2024 12:48
Show Gist options
  • Save xixixao/e5f75332c647cd18fdc6c213ec55d38f to your computer and use it in GitHub Desktop.
Save xixixao/e5f75332c647cd18fdc6c213ec55d38f to your computer and use it in GitHub Desktop.
Error using Clerk with TanStack Start

When I follow https://www.npmjs.com/package/@clerk/tanstack-start the auth works but I'm getting the following errors in the browser:

Warning: Expected server HTML to contain a matching <script> in <div>.
    at script
    at Asset (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-OCEAE7RH.js?v=ef51fe27:274:3)
    at ClerkProvider2 (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/@clerk_tanstack-start.js?v=ef51fe27:4396:27)
    at RootComponent (http://localhost:3002/_build/app/routes/__root.tsx?t=1721825015217:43:18)
    at MatchInner (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-JBDZ2WVL.js?v=ef51fe27:3620:23)
    at SafeFragment (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-JBDZ2WVL.js?v=ef51fe27:3542:87)
    at CatchBoundaryImpl (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-JBDZ2WVL.js?v=ef51fe27:1214:5)
    at CatchBoundary (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-JBDZ2WVL.js?v=ef51fe27:1194:32)
    at SafeFragment (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-JBDZ2WVL.js?v=ef51fe27:3542:87)
    at Match (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-JBDZ2WVL.js?v=ef51fe27:3564:18)
    at CatchBoundaryImpl (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-JBDZ2WVL.js?v=ef51fe27:1214:5)
    at CatchBoundary (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-JBDZ2WVL.js?v=ef51fe27:1194:32)
    at MatchesInner (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-JBDZ2WVL.js?v=ef51fe27:3768:19)
    at SafeFragment (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-JBDZ2WVL.js?v=ef51fe27:3542:87)
    at Matches (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-JBDZ2WVL.js?v=ef51fe27:3758:18)
    at QueryClientProvider (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-4V4J3U7E.js?v=ef51fe27:2719:3)
    at Wrap (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/@tanstack_react-router-with-query.js?v=ef51fe27:90:14)
    at RouterContextProvider (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-JBDZ2WVL.js?v=ef51fe27:3854:3)
    at RouterProvider (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-JBDZ2WVL.js?v=ef51fe27:3873:27)
    at StartClient (http://localhost:3002/_build/node_modules/.vinxi/cache/client/deps/chunk-OCEAE7RH.js?v=ef51fe27:735:14)

and (I suspect related)

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (chunk-ZQHOHLQB.js?v=ef51fe27:9491:17)
    at tryToClaimNextHydratableInstance (chunk-ZQHOHLQB.js?v=ef51fe27:9512:15)
    at updateHostComponent (chunk-ZQHOHLQB.js?v=ef51fe27:14789:13)
    at beginWork (chunk-ZQHOHLQB.js?v=ef51fe27:15923:22)
    at HTMLUnknownElement.callCallback2 (chunk-ZQHOHLQB.js?v=ef51fe27:3674:22)
    at Object.invokeGuardedCallbackDev (chunk-ZQHOHLQB.js?v=ef51fe27:3699:24)
    at invokeGuardedCallback (chunk-ZQHOHLQB.js?v=ef51fe27:3733:39)
    at beginWork$1 (chunk-ZQHOHLQB.js?v=ef51fe27:19761:15)
    at performUnitOfWork (chunk-ZQHOHLQB.js?v=ef51fe27:19194:20)
    at workLoopSync (chunk-ZQHOHLQB.js?v=ef51fe27:19133:13)

This happens after wrapping the RootDocument with ClerkProvider (the rest of the Clerk setup doesn't affect this and isn't causing any errors).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment