TTC
Theo's Typesafe Cult•14mo 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
emberseeOP•14mo 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
emberseeOP•14mo 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•14mo 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_---__-•14mo 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•14mo ago
im using sst tho
embersee
emberseeOP•14mo ago
did u remove the vercel_url env from .env?
Aliy Akhbar
Aliy Akhbar•14mo ago
yup
embersee
emberseeOP•14mo ago
got a repo to share? i can have a look
Aliy Akhbar
Aliy Akhbar•14mo ago
1 min!
Aliy Akhbar
Aliy Akhbar•14mo 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•14mo 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
emberseeOP•14mo ago
is this erroring in prod on sst or local?
Aliy Akhbar
Aliy Akhbar•14mo ago
prod working locally
Aliy Akhbar
Aliy Akhbar•14mo ago
embersee
emberseeOP•14mo 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•14mo ago
did you change yours too?
embersee
emberseeOP•14mo ago
And add a SST_URL into .env vercel_url is a reserved env name im assuming, hence the crashing
Aliy Akhbar
Aliy Akhbar•14mo ago
hmm let me try that
embersee
emberseeOP•14mo 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
emberseeOP•14mo ago
But, the SST_URL env should only be available on your deployment, not locally ... hope that makes sense
Aliy Akhbar
Aliy Akhbar•14mo 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
emberseeOP•14mo ago
sorry i dont know how much more i can help :((
Aliy Akhbar
Aliy Akhbar•14mo ago
No worries! Trying to dig around to test more 🫠
embersee
emberseeOP•14mo ago
are u trying to transition an app to ct3a or just starting a fresh one?
Aliy Akhbar
Aliy Akhbar•14mo ago
Fresh one
embersee
emberseeOP•14mo ago
probably make an issue in the repo, think there's gonna be people who will see it
Aliy Akhbar
Aliy Akhbar•14mo 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•14mo ago
I have the exact same, have you figuered out what was the problem? Omg you are a life saver!
embersee
emberseeOP•14mo ago
you’re welcome 😊
Tim
Tim•13mo 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