[NEXT-1181] DynamicServerError: Dynamic server usage: cookies

[focux]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.13.2
      npm: 9.3.0
      Yarn: 1.22.19
      pnpm: 7.25.1
    Relevant packages:
      next: 13.4.1
      eslint-config-next: 13.3.0
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/focux/next-cookies-bug

To Reproduce

1. Clone the repository
2. Run npm run build

Describe the Bug

After upgrading to Next from 13.3.5 to 13.4.1, I'm getting a lot of errors that say:

- info Creating an optimized production build ..node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

DynamicServerError: Dynamic server usage: cookies
    at staticGenerationBailout (/Users/[redacted]/Projects/[redacted]/apps/web-app/.next/server/chunks/3311.js:46379:21)
    at cookies (/Users/[redacted]/Projects/[redacted]/apps/web-app/.next/server/chunks/6647.js:172:62)
    at getAccessToken (/Users/[redacted]/Projects/[redacted]/apps/web-app/.next/server/chunks/9041.js:30473:40)
    at /Users/[redacted]/Projects/[redacted]/apps/web-app/.next/server/chunks/9041.js:30505:55
    at /Users/[redacted]/Projects/[redacted]/apps/web-app/.next/server/chunks/6647.js:2598:44 {
  digest: 'DYNAMIC_SERVER_USAGE'
}

The app works good when running it on development mode.

Expected Behavior

According to the docs, using the cookies function automatically opt-ins my pages to dynamic rendering.

So I would expect the build to succeed as before and also those errors to be clearer to at least know in what page is originating.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1181

[sinclairnick]

Am getting this issue too. @timneutkens do you have any guidance on workarounds prior to this being fixed? I couldn't find docs about how to use the export const dynamic stuff, which I imagine may help here.

[naseef0]

I have a similar issue Error: Dynamic server usage: cookies

When I removed generateStaticParams from the layout, it no longer occurs.

But we need this during static page generation on the build, right?

[skylive-skl]

I solved this problem simply by adding this line to the app/layout.tsx file
export const dynamic = 'force-dynamic'

[naseef0]

I solved this problem simply by adding this line to the app/layout.tsx file export const dynamic = 'force-dynamic'

Is that the correct way?

[weilueluo]

any update?

[Jordaneisenburger]

Running into the same issue, export const dynamic = 'force-dynamic' does "fix" the issue but it's not an ideal solution I think. Also seems like #49066 and #50634 and are related

[ifuller1]

Force dynamic prevents any static rendering. Static rendering was working for pages using "cookies" previously (at least, it appeared to be).

[martin-coded]

I had a similar problem with draftMode() and as a quick workaround I just added a try catch block to make sure that I can access the cookies. With this I can still generate the pages with generateStaticParams

function isDraftModeTrue(): boolean {
  try {
    const {isEnabled} = draftMode()
    return isEnabled;
  } catch (error) {
    return false;
  }
}

const isDraftMode: boolean = isDraftModeTrue();
if(isDraftMode){
 // fetch some data and set header with jummy cookie data
}

I think you could do the same only for cookies.

function isCookieAvailable(): boolean {
  try {
    const cookieStore = cookies();
    return true;
  } catch (error) {
    return false;
  }
}

I just started with next.js. I know it doesn't make sense to access cookies when the pages are getting pre-generated, but I also didnt't figure out a better way to solve this.

[SamKomesarook]

The export const dynamic = 'force-dynamic line worked for me when placed in my layout.tsx file, but when I navigate to a different page using the useRouter hook, I get the following err:

Error: Dynamic server usage: force-dynamic