tRPC•2y ago•

3 replies

Next.js/tRPC Prefetch w/ HydrateClient "Error occurred prerendering page"

Hello all, I'm trying to get to the bottom of an issue I'm having using prefetching with HydrateClient. I'm using the t3 stack, so I believe that HydrateClient is a helper function wrapping tRPC

helpers.dehydrate()

helpers.dehydrate()

...

When I run this code with

pnpm dev

pnpm dev

, it works fine, but when I go to

pnpm build

pnpm build

, I am getting

Error occurred prerendering page "/queue". Read more: https://nextjs.org/docs/messages/prerender-error

Error occurred prerendering page "/queue". Read more: https://nextjs.org/docs/messages/prerender-error

Here is the minimum example that I was able to reproduce with:

// app/queue/page.tsx

import { api, HydrateClient } from "~/trpc/server";

import QueueList from "~/app/queue/components/list";

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Queue",
};

export default function QueuePage() {
  void api.queue.getList.prefetch({ status: "pending" });

  return (
    <HydrateClient>
      <QueueList />
    </HydrateClient>
  );
}

// app/queue/page.tsx

import { api, HydrateClient } from "~/trpc/server";

import QueueList from "~/app/queue/components/list";

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Queue",
};

export default function QueuePage() {
  void api.queue.getList.prefetch({ status: "pending" });

  return (
    <HydrateClient>
      <QueueList />
    </HydrateClient>
  );
}

And the Queue component:

// /app/queue/components/list.tsx

"use client";

import { api } from "~/trpc/react";

export default function QueueList() {
  // I also get the same error with {data} = (...).useQuery
  const [data] = api.queue.getList.useSuspenseQuery(
    {
      status: "pending",
    },
    {
      refetchInterval: 5 * 1000,
    },
  );

  return <h1>Test</h1>;
}

// /app/queue/components/list.tsx

"use client";

import { api } from "~/trpc/react";

export default function QueueList() {
  // I also get the same error with {data} = (...).useQuery
  const [data] = api.queue.getList.useSuspenseQuery(
    {
      status: "pending",
    },
    {
      refetchInterval: 5 * 1000,
    },
  );

  return <h1>Test</h1>;
}

I've tried using both useSuspenseQuery and useQuery in the client component. I'm not sure what I'm doing wrong! Would love to figure out prefetching.

Relevant Versions:

"next": "^14.2.5",
"react": "^18.3.1",
"@trpc/client": "11.0.0-rc.446",
"@trpc/next": "11.0.0-rc.446",
"@trpc/react-query": "11.0.0-rc.446",
"@trpc/server": "11.0.0-rc.446"

"next": "^14.2.5",
"react": "^18.3.1",
"@trpc/client": "11.0.0-rc.446",
"@trpc/next": "11.0.0-rc.446",
"@trpc/react-query": "11.0.0-rc.446",
"@trpc/server": "11.0.0-rc.446"

Solution

I FIXED IT! Stupid mistake, I wasn't marking the root page function that was performing the prefetch as

async

async

... i.e:

Broken:

export default function QueuePage() {

export default function QueuePage() {

Fix:

export default async function QueuePage() {

export default async function QueuePage() {

Jump to solution

Next.js/tRPC Prefetch w/ HydrateClient "Error occurred prerendering page"

Hello all, I'm trying to get to the bottom of an issue I'm having using prefetching with HydrateClient. I'm using the t3 stack, so I believe that HydrateClient is a helper function wrapping tRPC

helpers.dehydrate()

helpers.dehydrate()

...

When I run this code with

pnpm dev

pnpm dev

, it works fine, but when I go to

pnpm build

pnpm build

, I am getting

Error occurred prerendering page "/queue". Read more: https://nextjs.org/docs/messages/prerender-error

Error occurred prerendering page "/queue". Read more: https://nextjs.org/docs/messages/prerender-error

Here is the minimum example that I was able to reproduce with:

// app/queue/page.tsx

import { api, HydrateClient } from "~/trpc/server";

import QueueList from "~/app/queue/components/list";

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Queue",
};

export default function QueuePage() {
  void api.queue.getList.prefetch({ status: "pending" });

  return (
    <HydrateClient>
      <QueueList />
    </HydrateClient>
  );
}

// app/queue/page.tsx

import { api, HydrateClient } from "~/trpc/server";

import QueueList from "~/app/queue/components/list";

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Queue",
};

export default function QueuePage() {
  void api.queue.getList.prefetch({ status: "pending" });

  return (
    <HydrateClient>
      <QueueList />
    </HydrateClient>
  );
}

And the Queue component:

// /app/queue/components/list.tsx

"use client";

import { api } from "~/trpc/react";

export default function QueueList() {
  // I also get the same error with {data} = (...).useQuery
  const [data] = api.queue.getList.useSuspenseQuery(
    {
      status: "pending",
    },
    {
      refetchInterval: 5 * 1000,
    },
  );

  return <h1>Test</h1>;
}

// /app/queue/components/list.tsx

"use client";

import { api } from "~/trpc/react";

export default function QueueList() {
  // I also get the same error with {data} = (...).useQuery
  const [data] = api.queue.getList.useSuspenseQuery(
    {
      status: "pending",
    },
    {
      refetchInterval: 5 * 1000,
    },
  );

  return <h1>Test</h1>;
}

I've tried using both useSuspenseQuery and useQuery in the client component. I'm not sure what I'm doing wrong! Would love to figure out prefetching.

Relevant Versions:

"next": "^14.2.5",
"react": "^18.3.1",
"@trpc/client": "11.0.0-rc.446",
"@trpc/next": "11.0.0-rc.446",
"@trpc/react-query": "11.0.0-rc.446",
"@trpc/server": "11.0.0-rc.446"

"next": "^14.2.5",
"react": "^18.3.1",
"@trpc/client": "11.0.0-rc.446",
"@trpc/next": "11.0.0-rc.446",
"@trpc/react-query": "11.0.0-rc.446",
"@trpc/server": "11.0.0-rc.446"

Solution

I FIXED IT! Stupid mistake, I wasn't marking the root page function that was performing the prefetch as

async

async

... i.e:

Broken:

export default function QueuePage() {

export default function QueuePage() {

Fix:

export default async function QueuePage() {

export default async function QueuePage() {

Jump to solution

Next.js/tRPC Prefetch w/ HydrateClient "Error occurred prerendering page"

Similar Threads

Next.js/tRPC Prefetch w/ HydrateClient "Error occurred prerendering page"

Similar Threads

Similar Threads

Similar Threads