TTC
Theo's Typesafe Cult•4mo ago
Matthew

ERROR: o [TRPCClientError]: Invalid response or stream interrupted

Recently kicked off a new project from create-t3-app. I made one update to use neon db on the db/schema and sent up my first commit/innit. The project deployed and I was able to create a new post and view the latest post with no issues. For my second commit I wanted to remove most of the boilerplate t3 setup. You can see this in the image I attached for my PR. I removed 
const hello = await api.post.hello({ text: "from tRPC" });
const hello = await api.post.hello({ text: "from tRPC" });
and removed most of the content on the page. my new page.tsx looks like this 
import { LatestPost } from "~/app/_components/post";
import { api, HydrateClient } from "~/trpc/server";

export default async function Home() {
  void api.post.getLatest.prefetch();

  return (
    <HydrateClient>
      <main className="flex min-h-screen flex-col items-center justify-center">
        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
          <LatestPost />
        </div>
      </main>
    </HydrateClient>
  );
}
import { LatestPost } from "~/app/_components/post";
import { api, HydrateClient } from "~/trpc/server";

export default async function Home() {
  void api.post.getLatest.prefetch();

  return (
    <HydrateClient>
      <main className="flex min-h-screen flex-col items-center justify-center">
        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
          <LatestPost />
        </div>
      </main>
    </HydrateClient>
  );
}
I now get this error when deploying to vercel. 
o [TRPCClientError]: Invalid response or stream interrupted
    at o.from (/vercel/path0/.next/server/chunks/258.js:2:59037)
    at /vercel/path0/.next/server/chunks/258.js:2:65841
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  meta: undefined,
  shape: undefined,
  data: undefined,
  digest: '1056879117',
  [cause]: _ [Error]: Invalid response or stream interrupted
      at Object.a (/vercel/path0/.next/server/chunks/258.js:6:12614)
      at [kAbort] (node:internal/webstreams/writablestream:537:33)
      at ensureIsPromise (node:internal/webstreams/util:185:19)
      at writableStreamFinishErroring (node:internal/webstreams/writablestream:905:5)
      at writableStreamStartErroring (node:internal/webstreams/writablestream:737:5)
      at writableStreamAbort (node:internal/webstreams/writablestream:680:5)
      at node:internal/webstreams/readablestream:1506:15
o [TRPCClientError]: Invalid response or stream interrupted
    at o.from (/vercel/path0/.next/server/chunks/258.js:2:59037)
    at /vercel/path0/.next/server/chunks/258.js:2:65841
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  meta: undefined,
  shape: undefined,
  data: undefined,
  digest: '1056879117',
  [cause]: _ [Error]: Invalid response or stream interrupted
      at Object.a (/vercel/path0/.next/server/chunks/258.js:6:12614)
      at [kAbort] (node:internal/webstreams/writablestream:537:33)
      at ensureIsPromise (node:internal/webstreams/util:185:19)
      at writableStreamFinishErroring (node:internal/webstreams/writablestream:905:5)
      at writableStreamStartErroring (node:internal/webstreams/writablestream:737:5)
      at writableStreamAbort (node:internal/webstreams/writablestream:680:5)
      at node:internal/webstreams/readablestream:1506:15
No description
No description
6 Replies
Matthew
MatthewOP•4mo ago
I tried awaiting 
  void api.post.getLatest.prefetch();
  void api.post.getLatest.prefetch();
I realized I don't understand how all of this works and would be grateful if someone could explain to me what the issue is with the changes I made! More context for the error on a local build 
Generating static pages (0/4)  [    ] << query  #1 post.getLatest  {
  input: undefined,
  result: a [TRPCClientError]: fetch failed
      at a.from 
      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:11372:11)
        at process.processTicksAndRejections {
      cause: [Error]
    }
  },
  elapsedMs: 10
}
a [TRPCClientError]: fetch failed
    at a.from 
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  meta: undefined,
  shape: undefined,
  data: undefined,
  digest: '2771849415',
  [cause]: TypeError: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11372:11)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.fetch (/Users/x/y/z/.next/server/chunks/258.js:2:65199) {
    cause: Error: connect ECONNREFUSED ::1:3000
        at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
        at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
      errno: -61,
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '::1',
      port: 3000
    }
  }
}

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Generating static pages (0/4)  [    ] << query  #1 post.getLatest  {
  input: undefined,
  result: a [TRPCClientError]: fetch failed
      at a.from 
      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:11372:11)
        at process.processTicksAndRejections {
      cause: [Error]
    }
  },
  elapsedMs: 10
}
a [TRPCClientError]: fetch failed
    at a.from 
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  meta: undefined,
  shape: undefined,
  data: undefined,
  digest: '2771849415',
  [cause]: TypeError: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11372:11)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.fetch (/Users/x/y/z/.next/server/chunks/258.js:2:65199) {
    cause: Error: connect ECONNREFUSED ::1:3000
        at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
        at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
      errno: -61,
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '::1',
      port: 3000
    }
  }
}

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
adding 
export const dynamic = "force-dynamic";
export const dynamic = "force-dynamic";
solves my issue but i still don't understand why removing this 
const hello = await api.post.hello({ text: "from tRPC" });
const hello = await api.post.hello({ text: "from tRPC" });
suddenly breaks the build? code snippet for what builds now 
import { LatestPost } from "~/app/_components/post";
import { api, HydrateClient } from "~/trpc/server";

export const dynamic = "force-dynamic";

export default async function Home() {
  void api.post.getLatest.prefetch();
  return (
    <HydrateClient>
      <main className="flex min-h-screen flex-col items-center justify-center">
        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
          <LatestPost />
        </div>
      </main>
    </HydrateClient>
  );
}
import { LatestPost } from "~/app/_components/post";
import { api, HydrateClient } from "~/trpc/server";

export const dynamic = "force-dynamic";

export default async function Home() {
  void api.post.getLatest.prefetch();
  return (
    <HydrateClient>
      <main className="flex min-h-screen flex-col items-center justify-center">
        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
          <LatestPost />
        </div>
      </main>
    </HydrateClient>
  );
}
William
William•4mo ago
I believe you have to use prefetch server-side together with useSuspenseQuery on the client-side. component: 
'use client'

const [meta] = api.budget.getMeta.useSuspenseQuery()
'use client'

const [meta] = api.budget.getMeta.useSuspenseQuery()
page: 
export default async function Page() {
  void api.budget.getMeta.prefetch()

  return (
    <HydrateClient>
      <BudgetsMeta />
    </HydrateClient>
  )
}
export default async function Page() {
  void api.budget.getMeta.prefetch()

  return (
    <HydrateClient>
      <BudgetsMeta />
    </HydrateClient>
  )
}
Juraj98
Juraj98•4mo ago
@Matt_ , are you using clerk by any chance?
Matthew
MatthewOP•4mo ago
@William thanks for this suggestion. I will test this out today and get back to you. Out of curiousty do you know why the default code works but removing the other api call suddenly breaks and needs to be reworked? @Juraj98 I am not! This is just the starter template from create t3 app latest. so not far along in this project
Juraj98
Juraj98•4mo ago
@Matt_, could I take a look at your code?
adit
adit•4mo ago
Following this thread since I got the same issue. I tried to set the Route Segment to force-dynamic, my site was rendered to browser, but returned with 500 error code. Please take a look at: https://lengis.aprdth.com. It successfully render the page but it returns 500 error code.
Want results from more Discord servers?
Add your server