TTC
Theo's Typesafe Cult•8mo ago
embersee

Error on adding t3 app router to existing NextJS project

Hi, so i've init'ed the new t3app router template, and tried to transition it to an existing project. I can get Client-side tRPC calls to work, but Server-side tRPC calls give this error: 
 >> query  #1 hello.hello  { input: undefined }
 << query  #1 hello.hello  {
  input: undefined,
  result: TRPCClientError: fetch failed
      at TRPCClientError.from (webpack-internal:///(rsc)/./node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs:41:16)
      at eval (webpack-internal:///(rsc)/./node_modules/@trpc/client/dist/httpBatchLink-cee1f56c.mjs:207:101)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    meta: undefined,
    shape: undefined,
    data: undefined,
    [cause]: TypeError: fetch failed
        at Object.fetch (node:internal/deps/undici/undici:11413:11)
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
      cause: [Error]
    }
  },
  elapsedMs: 45
}
 ⨯ node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs (37:15) @ TRPCClientError.from
 ⨯ Internal error: TRPCClientError: fetch failed
    at TRPCClientError.from (./node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs:41:16)
    at eval (./node_modules/@trpc/client/dist/httpBatchLink-cee1f56c.mjs:207:101)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Cause: TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11413:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: getaddrinfo ENOTFOUND https
      at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:107:26)
      at GetAddrInfoReqWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -3008,
    code: 'ENOTFOUND',
    syscall: 'getaddrinfo',
    hostname: 'https'
  }
}
 >> query  #1 hello.hello  { input: undefined }
 << query  #1 hello.hello  {
  input: undefined,
  result: TRPCClientError: fetch failed
      at TRPCClientError.from (webpack-internal:///(rsc)/./node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs:41:16)
      at eval (webpack-internal:///(rsc)/./node_modules/@trpc/client/dist/httpBatchLink-cee1f56c.mjs:207:101)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    meta: undefined,
    shape: undefined,
    data: undefined,
    [cause]: TypeError: fetch failed
        at Object.fetch (node:internal/deps/undici/undici:11413:11)
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
      cause: [Error]
    }
  },
  elapsedMs: 45
}
 ⨯ node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs (37:15) @ TRPCClientError.from
 ⨯ Internal error: TRPCClientError: fetch failed
    at TRPCClientError.from (./node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs:41:16)
    at eval (./node_modules/@trpc/client/dist/httpBatchLink-cee1f56c.mjs:207:101)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Cause: TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11413:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: getaddrinfo ENOTFOUND https
      at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:107:26)
      at GetAddrInfoReqWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -3008,
    code: 'ENOTFOUND',
    syscall: 'getaddrinfo',
    hostname: 'https'
  }
}
I can't seem to wrap my head around what the error is about... Will add to this post as i figure it out.
30 Replies
embersee
embersee•8mo ago
Here's the branch link. https://github.com/embersee/delphox/tree/add-t3-principles thanks for helping out ^^
GitHub
GitHub - embersee/delphox at add-t3-principles
Contribute to embersee/delphox development by creating an account on GitHub.
embersee
embersee•8mo ago
The error has got to do with environment variables in a .env file... what a turn of events. When i add my own variables the server gives out the previous error. If the .env file is untouched from t3@latest generated template – everything works fine. Anybody any idea what that could be? Well this is fixed. The error was an environment variable that just broke everything... Do not use VERCEL_URL in your .env or env.mjs files
Aliy Akhbar
Aliy Akhbar•8mo ago
hi, im also facing similar issue... im using sst to deploy, i'm guessing its the getBaseUrl in shared.ts? i still cant figure out why on my side...
!Stan_---__-
!Stan_---__-•8mo ago
Ya I had the same issue, if u add the VERCEL_URL to your .env and env.mjs, the trpc/shared.ts will use that as the url for local development. Instead, add the VERCEL_URL in your env vars in Vercel
Aliy Akhbar
Aliy Akhbar•8mo ago
im using sst tho
embersee
embersee•8mo ago
did u remove the vercel_url env from .env?
Aliy Akhbar
Aliy Akhbar•8mo ago
yup
embersee
embersee•8mo ago
got a repo to share? i can have a look
Aliy Akhbar
Aliy Akhbar•8mo ago
1 min!
Aliy Akhbar
Aliy Akhbar•8mo ago
https://github.com/Hyperfuse-Studio/base-code-t3-prisma
GitHub
GitHub - Hyperfuse-Studio/base-code-t3-prisma
Contribute to Hyperfuse-Studio/base-code-t3-prisma development by creating an account on GitHub.
Aliy Akhbar
Aliy Akhbar•8mo ago
i can see this 
2023-10-23T15:59:08.786Z    e01192b4-091e-4965-af58-043e3abcfe6d    ERROR    TRPCClientError: fetch failed
    at TRPCClientError.from (/var/task/.next/server/chunks/886.js:1:22649)
    at /var/task/.next/server/chunks/886.js:1:27723
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  meta: undefined,
  shape: undefined,
  data: undefined,
  [cause]: TypeError: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11576:11)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    cause: Error: connect ECONNREFUSED 127.0.0.1:3000
        at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
        at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
      errno: -111,
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '127.0.0.1',
      port: 3000
    }
  }
}
2023-10-23T15:59:08.786Z    e01192b4-091e-4965-af58-043e3abcfe6d    ERROR    TRPCClientError: fetch failed
    at TRPCClientError.from (/var/task/.next/server/chunks/886.js:1:22649)
    at /var/task/.next/server/chunks/886.js:1:27723
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  meta: undefined,
  shape: undefined,
  data: undefined,
  [cause]: TypeError: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11576:11)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    cause: Error: connect ECONNREFUSED 127.0.0.1:3000
        at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
        at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
      errno: -111,
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '127.0.0.1',
      port: 3000
    }
  }
}
embersee
embersee•8mo ago
is this erroring in prod on sst or local?
Aliy Akhbar
Aliy Akhbar•8mo ago
prod working locally
Aliy Akhbar
Aliy Akhbar•8mo ago
embersee
embersee•8mo ago
id suggest replacing this func: 
function getBaseUrl() {
  if (typeof window !== "undefined") return "";
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
  return `http://localhost:3000`;
}
function getBaseUrl() {
  if (typeof window !== "undefined") return "";
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
  return `http://localhost:3000`;
}
replace with: 
function getBaseUrl() {
  if (typeof window !== "undefined") return "";
  if (process.env.SST_URL) return `https://${process.env.SST_URL}`;
  return `http://localhost:3000`;
}
function getBaseUrl() {
  if (typeof window !== "undefined") return "";
  if (process.env.SST_URL) return `https://${process.env.SST_URL}`;
  return `http://localhost:3000`;
}
Aliy Akhbar
Aliy Akhbar•8mo ago
did you change yours too?
embersee
embersee•8mo ago
And add a SST_URL into .env vercel_url is a reserved env name im assuming, hence the crashing
Aliy Akhbar
Aliy Akhbar•8mo ago
hmm let me try that
embersee
embersee•8mo ago
also like ur SST_URL should be the URL that it deploys to, like https://d1mzwcg7pl8jm9.cloudfront.net/ this one you send earlier. Maybe you already know this ^^
Create T3 App
Generated by create-t3-app
embersee
embersee•8mo ago
But, the SST_URL env should only be available on your deployment, not locally ... hope that makes sense
Aliy Akhbar
Aliy Akhbar•8mo ago
yup, got it. lemme try that doesnt seem to make any diff 😦 Funny thing today I tried with vercel to deploy it’s also not working 🤣
embersee
embersee•8mo ago
sorry i dont know how much more i can help :((
Aliy Akhbar
Aliy Akhbar•8mo ago
No worries! Trying to dig around to test more 🫠
embersee
embersee•8mo ago
are u trying to transition an app to ct3a or just starting a fresh one?
Aliy Akhbar
Aliy Akhbar•8mo ago
Fresh one
embersee
embersee•8mo ago
probably make an issue in the repo, think there's gonna be people who will see it
Aliy Akhbar
Aliy Akhbar•8mo ago
I mean if the fresh one can’t even work properly after deploying to sst, then I wouldn’t even use it 🤣 Yeah will try out few more times before seeking for help 👍🏻
Laurens Lavaert
Laurens Lavaert•8mo ago
I have the exact same, have you figuered out what was the problem? Omg you are a life saver!
embersee
embersee•8mo ago
you’re welcome 😊
Tim
Tim•8mo ago
I faced the same issue but i dont have VERCEL_URL in my .env file 😢
Want results from more Discord servers?
Add your server
More Posts
RevalidationWhen I visit my pages, it fetches data and when I navigate back it doesn't fetch or rerender it. HowUpdate child client component on change in props passed from parent server componentI have a server component which asynchronously gets a next-auth user session using getServerSession.Vercel build: Module not found: Can't resolve '../build/Release/canvas.node'I've been trying to deploy to vercel but everytime I get the error: build: Module not found: Can't rCouldn't find any `pages` or `app` directoryIm trying to deploy a t3 app on vercel with the pages directory and its throwing me this error on deaccessing route handler issues 404 errorI have this route handler at `src/app/api/foo/route.ts`: ``` export async function GET(_request: ReqCaching and invalidation in t3-stack with app router and trpcHi guys, can someone explain what is the correct way to do invalidation with app router and trpc? Istrpc/react vs trpc/serverCan someone explain what the differences and when to use which? I just watched this https://youtu.bepdfs uploadI want to know if I can upload pdfs and then embed them on my website with iframe is that possible?how to resolve hydration failed error when including button shadcn dialogI have this dialog built out of shadcn's components: ``` import { Button } from "./ui/button"; imporNextjsis there a way i can pass nextjs/headers to axios ?