rsnext/errors/next-dynamic-api-wrong-context.mdx
Balázs Orbán 971843d019
fix: clarify Dynamic API calls in wrong context (#62143)
### What?

An unactionable error is thrown when `headers()`, `cookies()` or other
Dynamic API functions are called outside the render/request context.
This PR clarifies what the user can do to fix the problem.

### Why?

The current error is  hard to understand

> Error: Invariant: `cookies` expects to have requestAsyncStorage, none
available.

### How?

I am adding a dedicated error page and rephrasing the error message.

Closes NEXT-2509
2024-02-19 13:41:14 +01:00

45 lines
1.2 KiB
Text

---
title: Dynamic API was called outside request
---
#### Why This Error Occurred
A Dynamic API was called outside a request scope. (Eg.: Global scope).
Note that Dynamic APIs could have been called deep inside other modules/functions (eg.: third-party libraries) that are not immediately visible.
#### Possible Ways to Fix It
Make sure that all Dynamic API calls happen in a request scope.
Example:
```diff
// app/page.ts
import { cookies } from 'next/headers'
- const cookieStore = cookies()
export default function Page() {
+ const cookieStore = cookies()
return ...
}
```
```diff
// app/foo/route.ts
import { headers } from 'next/headers'
- const headersList = headers()
export async function GET() {
+ const headersList = headers()
return ...
}
```
### Useful Links
- [`headers()` function](https://nextjs.org/docs/app/api-reference/functions/headers)
- [`cookies()` function](https://nextjs.org/docs/app/api-reference/functions/cookies)
- [`draftMode()` function](https://nextjs.org/docs/app/api-reference/functions/draft-mode)
- [`unstable_noStore()` function](https://nextjs.org/docs/app/api-reference/functions/unstable_noStore)
- [`unstable_cache()` function](https://nextjs.org/docs/app/api-reference/functions/unstable_cache)