Krulknul•4mo ago

The string did not match the expected pattern

Hi, I'm trying tRPC out for the first time. Everything went very smooth up until trying to query something from my frontend (which is SvelteKit) I get the error in image attached.

<script lang="ts">
    export let data;
    import { createTRPCClient, httpBatchLink } from "@trpc/client";
    import type { AppRouter } from "bot/src/trpc";

    const trpc = createTRPCClient<AppRouter>({
        links: [
            httpBatchLink({
                url: "https://[redacted]-ngrok.app",
            }),
        ],
    });

    setTimeout(async () => {
        console.log("starting to wait");
        try {
            const result = await trpc.SimplePong.query("hoi");
        } catch (e) {
            console.error(e);
        }
        console.log("done waiting");
    }, 1000);
</script>

<script lang="ts">
    export let data;
    import { createTRPCClient, httpBatchLink } from "@trpc/client";
    import type { AppRouter } from "bot/src/trpc";

    const trpc = createTRPCClient<AppRouter>({
        links: [
            httpBatchLink({
                url: "https://[redacted]-ngrok.app",
            }),
        ],
    });

    setTimeout(async () => {
        console.log("starting to wait");
        try {
            const result = await trpc.SimplePong.query("hoi");
        } catch (e) {
            console.error(e);
        }
        console.log("done waiting");
    }, 1000);
</script>

I am running the tRPC service locally, but tunneled through ngrok. This seemed to work when I tested it using Postman: it returned a value just as I expected, so the server is working. I'm using node 20 - npm tRPC version: 11.0.0-rc.477

Solution:

Well, I figured it out. Seems somehow ngrok was the problem anyway. Since HTML was being returned (the ngrok browser warning screen), the json deserialization was failing, resulting in this error. To fix, I added the ngrok-skip-browser-warning header, which worked: ```ts const trpc = createTRPCClient<AppRouter>({...

Jump to solution

1 Reply

Solution

Krulknul•4mo ago

    const trpc = createTRPCClient<AppRouter>({
        links: [
            httpBatchLink({
                url: "https://[redacted].ngrok-free.app",
                headers: new Headers({
                    "ngrok-skip-browser-warning": "1",
                }),
            }),
        ],
    });

    const trpc = createTRPCClient<AppRouter>({
        links: [
            httpBatchLink({
                url: "https://[redacted].ngrok-free.app",
                headers: new Headers({
                    "ngrok-skip-browser-warning": "1",
                }),
            }),
        ],
    });