Theo's Typesafe Cult•2y ago

trpc error when deploying t3 app in vercel

I've been building an app for a while now and have recently been inspired it to convert it to t3 stack. Everything works locally, but when I deploy it to vercel I get this error every time i attempt to hit a trpc endpoint:

2022-11-07T04:45:56.937Z    b22c8823-6d79-4af1-8c81-ee002eda2b66    ERROR    SyntaxError: Unexpected token ' in JSON at position 0
    at JSON.parse (<anonymous>)
    at /var/task/.next/server/pages/api/trpc/[trpc].js:1515:29
RequestId: b22c8823-6d79-4af1-8c81-ee002eda2b66 Error: Runtime exited with error: exit status 1
Runtime.ExitError

2022-11-07T04:45:56.937Z    b22c8823-6d79-4af1-8c81-ee002eda2b66    ERROR    SyntaxError: Unexpected token ' in JSON at position 0
    at JSON.parse (<anonymous>)
    at /var/task/.next/server/pages/api/trpc/[trpc].js:1515:29
RequestId: b22c8823-6d79-4af1-8c81-ee002eda2b66 Error: Runtime exited with error: exit status 1
Runtime.ExitError

I'm kinda lost how to debug this. Anyone have any ideas?

4 Replies

Froxx•2y ago

In the error message it says there is something wrong in you server/pages/api/trpc/[trpc].ts at 1515:29. What does your code say there? My assumption would be you're trying to JSON.parse() something that's depending on one of your env vars which is not set correctly in production

Tom•2y ago

my code is pretty much straight from t3 and its certainly not 1500 lines llong

// src/pages/api/trpc/[trpc].ts
import { createNextApiHandler } from "@trpc/server/adapters/next";
import { appRouter } from "../../../server/trpc/router";
import { createContext } from "../../../server/trpc/context";
import { env } from "../../../env/server.mjs";

// export API handler
export default createNextApiHandler({
  router: appRouter,
  createContext,
  onError:
    env.NODE_ENV === "development"
      ? ({ path, error }) => {
          console.error(`❌ tRPC failed on ${path}: ${error}`);
        }
      : undefined,
});

// src/pages/api/trpc/[trpc].ts
import { createNextApiHandler } from "@trpc/server/adapters/next";
import { appRouter } from "../../../server/trpc/router";
import { createContext } from "../../../server/trpc/context";
import { env } from "../../../env/server.mjs";

// export API handler
export default createNextApiHandler({
  router: appRouter,
  createContext,
  onError:
    env.NODE_ENV === "development"
      ? ({ path, error }) => {
          console.error(`❌ tRPC failed on ${path}: ${error}`);
        }
      : undefined,
});

thats why im so confused ayyyy i fixed it. sorry for the noise TL;DR when setting environment variables in vercel dont include the quotes and i figured it out by running npm run start to build the js files which DID include the giant [trpc].js file so then i could look at the line it was running which was actually froma. completely different file

Froxx•2y ago

Builds being builds 🤷 LULW

joshborseth•2y ago

I’ve spent soooo long with that same issue 🤦‍♂️…. Those stupid quotes

Gaming

Programming

trpc error when deploying t3 app in vercel