TRPC vanilla client load failed when called on mobile browser

Hi, I have created a vanilla client to use TRPC without hooks in a create-t3-app project:

import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
import type { AppRouter } from "~/server/api/root";
import SuperJSON from "superjson";

export const trpcClient = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: "http://localhost:3000/api/trpc",
    }),
  ],
  transformer: SuperJSON,
});

import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
import type { AppRouter } from "~/server/api/root";
import SuperJSON from "superjson";

export const trpcClient = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: "http://localhost:3000/api/trpc",
    }),
  ],
  transformer: SuperJSON,
});

When I call const res = await trpcClient.example.hello.query({ text: "123" }); It works on desktop, but when using a mobile browser (tested on iOS safari and chrome), the following error is returned with no additional information being logged:

Unhandled Runtime Error 
TRPCClientError: Load failed

Unhandled Runtime Error 
TRPCClientError: Load failed

Is the error an issue with how the vanilla client is created and how might I be able to fix it? Thanks.

3 Replies

Tim•13mo ago

I faced the same issue - is there any fix?

Bryan3OP•13mo ago

I ended up just doing everything using the default react query method. Did you figure out a fix?

Tim•13mo ago

I "downgrade" from app router to pages router Now everything works fine

Gaming

Programming

TRPC vanilla client load failed when called on mobile browser