5 replies

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" });

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.

TTC

Theo's Typesafe Cult•3y ago•

5 replies

Bryan3

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" });

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.

TRPC vanilla client load failed when called on mobile browser

Similar Threads

TRPC vanilla client load failed when called on mobile browser

Similar Threads

Similar Threads

Similar Threads