Error: During prerendering, headers() rejects when the prerender is complete

[ahmedivy]

Summary

Getting this error with next 16 and cache components enabled.

Yes, I am wrapping the component that uses headers() with a suspense

Error: During prerendering, `headers()` rejects when the prerende
r is complete. Typically these errors are handled by React but if
 you move `headers()` to a different context by using `setTimeout
`, `after`, or similar functions you may observe this error and y
ou should handle it in that context. This occurred at route "/".
    at new Promise (<anonymous>)
    at headers (src/lib/api.ts:22:37)
    at UserMenu (src/components/header/user-menu/index.tsx:7:65)
  20 |     ],
  21 |     headers: async () => {
> 22 |       const incoming = await headers();
     |                                     ^
  23 |       const filtered = new Headers();
  24 |
  25 |       incoming.forEach((value, key) => { {
  route: '/',
  expression: '`headers()`',
  digest: 'HANGING_PROMISE_REJECTION'
}

Additional information

I am creating an ORPC link to a different backend and injecting request headers to the orpc link instance and thats where the error is being thrown i guess.

NOTE: this error just appears in the console, page rendering both in development and production build works just fine and no issue with partial pre rendering also, just error in server console.

Example

No response

[icyJoseph]

Bu then the headers data is incorrect? Is it possible to see a repository, or more context around the usage area?

[ahmedivy]

Sure, let me create a reproduceable repo

[ahmedivy]

No, the headers data is still correct

[ahmedivy]

@icyJoseph here is the link to repo, try running dev server and going to / page, you will see error on console https://github.com/ahmedivy/next-headers-error-example

[ahmedivy]

@icyJoseph any update?

[icyJoseph]

Hi sorry I ran out of time with this week's conf but I see you got the issue sorted out!

[dieguezz]

@ahmedivy if i understand correctly, during prerendering (static generation), Next.js generates HTML at build time or during the first request. At that point, there's no actual HTTP request, so there are no headers to access.

When your component tries to make an API call → the ORPC client tries to call headers throws during prerendering because there's no request context.

To fix this, you can use connection() like:

import { api } from "@/lib/api";
import { connection } from "next/server";

export async function UserAvatar() {
  await connection();
  
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const user = await (api as any).user.currentUser();
  return <pre>{JSON.stringify(user, null, 2)}</pre>;
}

So you force the request to be dynamic.

You can see more here

[ahmedivy]

i thought accessing header() and cookies() forces dynamic rendering automatically for that component

[dieguezz]

I think its because you are calling it inside the RPCLink configuration, which is defined at module load time.

using connection fixes the problem