TRPCClientError: Unable to transform response from server

I just migrated from Next Auth to Clerk. Clerk is working fine. tRPC works fine too, but I keep getting this error message from all requests. src/pages/_app.tsx
// ...
return
<ClerkProvider {...pageProps}>
{/* Everything else goes in here */}
</ClerkProvider>
// ...
export default api.withTRPC(MyApp)
// ...
return
<ClerkProvider {...pageProps}>
{/* Everything else goes in here */}
</ClerkProvider>
// ...
export default api.withTRPC(MyApp)
src/api/trpc.ts
import { clerkClient, getAuth } from '@clerk/nextjs/server'

export const createTRPCContext = async ({ req }: CreateNextContextOptions) => {
const session = getAuth(req)
const user = session.userId
? await clerkClient.users.getUser(session.userId)
: null

return {
userId: session?.userId ?? undefined,
orgId: session.orgId ?? undefined,
firstName: user?.firstName,
prisma,
}
}

const t = initTRPC.context<typeof createTRPCContext>().create({
transformer: superjson,
errorFormatter({ shape, error }) {
return {
...shape,
data: {
...shape.data,
zodError:
error.cause instanceof ZodError ? error.cause.flatten() : null,
},
}
},
})
import { clerkClient, getAuth } from '@clerk/nextjs/server'

export const createTRPCContext = async ({ req }: CreateNextContextOptions) => {
const session = getAuth(req)
const user = session.userId
? await clerkClient.users.getUser(session.userId)
: null

return {
userId: session?.userId ?? undefined,
orgId: session.orgId ?? undefined,
firstName: user?.firstName,
prisma,
}
}

const t = initTRPC.context<typeof createTRPCContext>().create({
transformer: superjson,
errorFormatter({ shape, error }) {
return {
...shape,
data: {
...shape.data,
zodError:
error.cause instanceof ZodError ? error.cause.flatten() : null,
},
}
},
})
1 Reply
Mocha
Mocha2mo ago
Turning off ssr in src/utils/api.ts seems to solve it, but it'd be nice if this can be used with SSR on.