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

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

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

Jump to solution

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>

Solution

ngrok-skip-browser-warning

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

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

Jump to solution

The string did not match the expected pattern

The string did not match the expected pattern

Similar Threads

Similar Threads

Similar Threads