Getting TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON when trying to call a back end api with Trcp

Question

I am planning on building an app using SST and tRPC. I have never used either so I am going through the docs and quick start to better understand the material. I came across an issue where the call is not rendering on the front end. Im not sure if I have the router wrong or something else in the backend. Everytime I make a request it will give this error TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON. But im not sure where its coming from.

Stacks

import { StackContext, Api, ViteStaticSite } from "@serverless-stack/resources";

export function MyStack({ stack }: StackContext) {
  const api = new Api(stack, "api", {
    routes: {
      "GET /todo": "functions/todo.handler"
    },
    cors : true,
  });

  const site = new ViteStaticSite(stack, "site", {
    path: "frontend",
    buildCommand: "npm run build",
    environment: {
      REACT_APP_API_URL: api.url,
    },
  });

  stack.addOutputs({
    SITE: site.url,
  });
}

router

import { initTRPC } from '@trpc/server';
import { z } from 'zod';


export const t = initTRPC.create();

const appRouter = t.router({
  greeting: t.procedure
  .input(
      z.object({
        name:  z.string(),
        })
    )
    .query(({input}) => {
    return { 
        text: `Hello ${input?.name ?? 'world'}`
    };
  }),
});

export type AppRouter = typeof appRouter;

import { awsLambdaRequestHandler } from '@trpc/server/adapters/aws-lambda';


export const handler = awsLambdaRequestHandler({
    router: appRouter  
})

frontend

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client'
import './index.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import { trpc } from './trpc';



const apiUrl = import.meta.env.REACT_APP_API_URL;


function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: `${apiUrl}/todo`
        }),
      ],
    }),
  );



  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <Sample />
      </QueryClientProvider>
    </trpc.Provider>
  );
}

function Sample(){
  const result = trpc.greeting.useQuery({name: 'will'})
    return (
      <div>
           <div>{result.isLoading ? "Loading..." : result.data?.text}</div>
      </div>
    )
  }

Rosemari

Answer 1

In this case it's likely that you are using the wrong environment variable format. Vite expects you to prepend your variable like this

VITE_API_URL: api.url

Since you're passing it as a react variable I'd expect your network call to be going to the wrong place. As such your TRPC api isn't ever getting hit, instead you're just hitting localhost:3000/undefined/greeting or a similar looking url.

Porthole