KrulknulK
tRPC•2y ago•
3 replies
Krulknul

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>


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
image.png
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:
    const trpc = createTRPCClient<AppRouter>({
        links: [
            httpBatchLink({
                url: "https://[redacted].ngrok-free.app",
                headers: new Headers({
                    "ngrok-skip-browser-warning": "1",
                }),
            }),
        ],
    });
Jump to solution
Was this page helpful?