TRPC vanilla client load failed when called on mobile browser

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

Unhandled Runtime Error 
TRPCClientError: Load failed