DynamicServerError: Dynamic server usage: cookies when trying to deploy #201

skorfmann · 2023-06-12T21:09:43Z

I'm seeing this error vercel/next.js#49373 when trying to deploy the example via Vercel.

Here's an excerpt from the build logs.

- warn Entire page /signin deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /signin
--
22:43:28.079 | DynamicServerError: Dynamic server usage: cookies
22:43:28.079 | at staticGenerationBailout (/vercel/path0/.next/server/chunks/883.js:11341:21)
22:43:28.080 | at Object.cookies (/vercel/path0/.next/server/chunks/883.js:11231:62)
22:43:28.080 | at NextServerComponentAuthStorageAdapter.getCookie (/vercel/path0/.next/server/chunks/913.js:199:42)
22:43:28.080 | at NextServerComponentAuthStorageAdapter.getItem (/vercel/path0/.next/server/chunks/913.js:571:28)
22:43:28.080 | at /vercel/path0/.next/server/chunks/883.js:3008:37
22:43:28.080 | at Generator.next (<anonymous>)
22:43:28.080 | at /vercel/path0/.next/server/chunks/883.js:2916:71
22:43:28.080 | at new Promise (<anonymous>)
22:43:28.080 | at __awaiter (/vercel/path0/.next/server/chunks/883.js:2898:12)
22:43:28.081 | at getItemAsync (/vercel/path0/.next/server/chunks/883.js:3007:38) {
22:43:28.081 | digest: 'DYNAMIC_SERVER_USAGE'
22:43:28.081 | }
22:43:28.081 | Error: DynamicServerError: Dynamic server usage: cookies
22:43:28.081 | at staticGenerationBailout (/vercel/path0/.next/server/chunks/883.js:11341:21)
22:43:28.083 | at Object.cookies (/vercel/path0/.next/server/chunks/883.js:11231:62)
22:43:28.083 | at NextServerComponentAuthStorageAdapter.getCookie (/vercel/path0/.next/server/chunks/913.js:199:42)
22:43:28.084 | at NextServerComponentAuthStorageAdapter.getItem (/vercel/path0/.next/server/chunks/913.js:571:28)
22:43:28.084 | at /vercel/path0/.next/server/chunks/883.js:3008:37
22:43:28.084 | at Generator.next (<anonymous>)
22:43:28.084 | at /vercel/path0/.next/server/chunks/883.js:2916:71
22:43:28.084 | at new Promise (<anonymous>)
22:43:28.084 | at __awaiter (/vercel/path0/.next/server/chunks/883.js:2898:12)
22:43:28.084 | at getItemAsync (/vercel/path0/.next/server/chunks/883.js:3007:38) {
22:43:28.084 | digest: 'DYNAMIC_SERVER_USAGE'

tried this with next@13.4.5 as well

Any way to fix this?

The text was updated successfully, but these errors were encountered:

optimizfx · 2023-06-13T13:06:35Z

I get this too, it looks like it never builds any api route pages, for me anyway!

I've tried adding

export const dynamic = 'force-dynamic';
export const revalidate = 0;

to those pages but it has no effect :(

ajesuscode · 2023-06-13T13:40:08Z

Same error on my side ((

DoIevenLift · 2023-06-18T04:35:48Z

Same error for me as well when using cookies in the latest supabase auth helpers.

No issues with previous Nextjs version (pre 13.4) and older supabase auth helpers.

mvofreire · 2023-06-22T14:58:08Z

Same problem here!

Any news here guys?

ajesuscode · 2023-06-22T15:26:25Z

Same problem here!

Any news here guys?

Check here #202 there are some workarounds

DanielhCarranza · 2023-06-28T05:47:24Z

Same error, has anyone figured it out yet? I tried all the steps with the latest versions but no success,

Error: DynamicServerError: Dynamic server usage: cookies
    at staticGenerationBailout (/home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/449.js:279:21)
    at Object.cookies (/home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/449.js:171:62)
    at NextServerComponentAuthStorageAdapter.getCookie (/home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/799.js:203:42)
    at NextServerComponentAuthStorageAdapter.getItem (/home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/799.js:571:28)
    at /home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/511.js:3078:37
    at Generator.next (<anonymous>)
    at /home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/511.js:2986:71
    at new Promise (<anonymous>)
    at __awaiter (/home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/511.js:2968:12)
    at getItemAsync (/home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/511.js:3077:38) {
  digest: 'DYNAMIC_SERVER_USAGE'
}

DanielhCarranza · 2023-06-28T06:47:25Z

I fixed it by adding export const revalidate = 0; to the layout.tsx

BenLyddane · 2023-07-04T16:14:45Z

I don't like the export const revalidate =0; solution, I don't want my entire app to build and operate like that.

I fixed it by add "use server" to the supabase-server.ts functions (getSession, getUserDetails, getSubscription, getActiveProductsWithPrices). The createServerSupabaseClient was giving me issues with the {cookies} it passes via server component.

Here's what a function looked like:

export async function getSession() {
'use server'
const supabase = createServerSupabaseClient();
try {
const {
data: { session }
} = await supabase.auth.getSession();
return session;
} catch (error) {
console.error('Error:', error);
return null;
}
}

Here is the Next JS page that helped me solve:

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions

salvinoto · 2023-08-01T14:38:36Z

Im still getting this I tried all of these fixes, I cannot for my life figure out why

andersonbcdefg · 2023-08-02T05:09:24Z

Me too :(

lamebrowndev · 2023-08-15T21:27:49Z

Anyone fix it?

Shawns2759 · 2023-08-18T02:25:43Z

So very sad. The app was working for me, then I saw that a build failed. I went and reverted to the last successful build. From then on none of the builds suceded. Any news?

Shawns2759 · 2023-08-22T19:10:32Z

removing the supabase cli fixed it for me.

zavbala · 2023-08-24T18:44:38Z

Dear God...

lamebrowndev · 2023-08-24T18:46:07Z

I don't like the export const revalidate =0; solution, I don't want my entire app to build and operate like that.

I fixed it by add "use server" to the supabase-server.ts functions (getSession, getUserDetails, getSubscription, getActiveProductsWithPrices). The createServerSupabaseClient was giving me issues with the {cookies} it passes via server component.

Here's what a function looked like:

export async function getSession() { 'use server' const supabase = createServerSupabaseClient(); try { const { data: { session } } = await supabase.auth.getSession(); return session; } catch (error) { console.error('Error:', error); return null; } }

Here is the Next JS page that helped me solve:

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions

This fixed it for me, thanks!

bwkam · 2023-08-26T19:05:50Z

I've tried adding 'use server' to every function supabase is related to, and still nothing works.

cristigoia · 2023-09-10T19:51:01Z

This #223 fixed the error for me.

kimhwanhoon · 2023-09-14T13:51:30Z

I don't like the export const revalidate =0; solution, I don't want my entire app to build and operate like that.

I fixed it by add "use server" to the supabase-server.ts functions (getSession, getUserDetails, getSubscription, getActiveProductsWithPrices). The createServerSupabaseClient was giving me issues with the {cookies} it passes via server component.

Here's what a function looked like:

export async function getSession() { 'use server' const supabase = createServerSupabaseClient(); try { const { data: { session } } = await supabase.auth.getSession(); return session; } catch (error) { console.error('Error:', error); return null; } }

Here is the Next JS page that helped me solve:

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions

but if I use this, I won't be able to get any auth token that is on cookies no?

jecrs687 · 2024-02-06T10:22:45Z

I discovered that if the cookie is called inside a try-catch it will generate this error.

Solutions: put the calling of the cookie (and headers) outside try-catch.

ruuuruiya · 2024-02-11T08:45:30Z

I discovered that if the cookie is called inside a try-catch it will generate this error.

Solutions: put the calling of the cookie (and headers) outside try-catch.

no one is calling the cookie in try catch. it's called from server components

DoIevenLift · 2024-02-12T23:55:39Z

I think this error kinda makes sense? If there is a page (or anything) that is using something that dynamically changes such as a cookie, even if that cookie is nested inside a server action then it can't render as a static resource.

In my case, the app still deploys every time despite the 'errors' - this may not be the same experience that other users are having however. I actually think that this is meant to be a warning rather than an error and should still allow the posting of the app build. Nextjs / Nextjs on Vercel might have a failsafe were if it can't render it statically, it'll shift it to dynamic?

Try doing something like this with your supabase server/serveraction clients.

const cookieStore = cookies();

const supabase = createWhateverTypeClient<Database>({ cookies: () => cookieStore });

I know the supabase docs especially for serverActionClient use ({ cookies }) but this could be causing the issue.

Unsure how long this has been up in the nextjs docs but here is a reference to their help doc to resolve the 'error' : https://nextjs.org/docs/messages/dynamic-server-error

Due to the app deploying and functioning I've put this in the 'deal with later' basket but hopefully these solutions might get people closer to a resolution.

jecrs687 · 2024-02-13T00:45:58Z

I discovered that if the cookie is called inside a try-catch, it will generate this error.
Solutions: put the calling of the cookie (and headers) outside try-catch.

no one is calling the cookie in try catch. it's called from server components

Sorry for not explaining it before, but in the background, when you use getSession of supabase, it will try to get cookies. And, if it is inside a try-catch, as in the example of BenLyddane, you will get an error.

The way to fix that is doing as DoIevenLift: put cookies outside any other function or conditional. When you declare cookies in this way, the build will understand that it is not a static content.

Other important thing is, if the cookie is called inside a server component, but wrapped in another function, you needs to use one of those options:

export const dynamic = "force-dynamic"
export const revalidate = 0
insert "use server" on the top of the file (or in the next line after declaration)

To explain that function will run on the server.

See the code behind getSession:
https://github.com/supabase/gotrue-js/blob/15c7c8258b2d42d3378be4f7738c728a07523579/src/GoTrueClient.ts#L898

Trafke011 · 2024-09-06T12:54:27Z

This is what I got from Copilot, when I had entered the error response:

**Possible Solutions
Force Dynamic Rendering: If you need to use cookies, you can force the page to be dynamically rendered by adding the following line to your component or page:
JavaScript

export const dynamic = 'force-dynamic';
AI-generated code. Review and use carefully. More info on FAQ.This tells Next.js to treat the page as dynamic, allowing the use of cookies 1.
Separate Static and Dynamic Parts: Another approach is to separate the static and dynamic parts of your application. You can statically generate the main structure of the page and then use client-side JavaScript to handle dynamic parts that require cookies.
Check for Static Generation: You can conditionally check if the code is running during static generation and avoid using cookies in that case:
JavaScript

import { cookies } from 'next/headers';

if (typeof window !== 'undefined') {
// Code that uses cookies
const allCookies = cookies().getAll();
}
AI-generated code. Review and use carefully. More info on FAQ.
Review Next.js Documentation: For more detailed guidance, you can refer to the Next.js documentation on dynamic server usage 2.**

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DynamicServerError: Dynamic server usage: cookies when trying to deploy #201

DynamicServerError: Dynamic server usage: cookies when trying to deploy #201

skorfmann commented Jun 12, 2023

optimizfx commented Jun 13, 2023

ajesuscode commented Jun 13, 2023

DoIevenLift commented Jun 18, 2023

mvofreire commented Jun 22, 2023

ajesuscode commented Jun 22, 2023

DanielhCarranza commented Jun 28, 2023 •

edited

Loading

DanielhCarranza commented Jun 28, 2023

BenLyddane commented Jul 4, 2023

salvinoto commented Aug 1, 2023

andersonbcdefg commented Aug 2, 2023

lamebrowndev commented Aug 15, 2023

Shawns2759 commented Aug 18, 2023

Shawns2759 commented Aug 22, 2023

zavbala commented Aug 24, 2023

lamebrowndev commented Aug 24, 2023

bwkam commented Aug 26, 2023 •

edited

Loading

cristigoia commented Sep 10, 2023

kimhwanhoon commented Sep 14, 2023

jecrs687 commented Feb 6, 2024

ruuuruiya commented Feb 11, 2024

DoIevenLift commented Feb 12, 2024

jecrs687 commented Feb 13, 2024

Trafke011 commented Sep 6, 2024

DynamicServerError: Dynamic server usage: cookies when trying to deploy #201

DynamicServerError: Dynamic server usage: cookies when trying to deploy #201

Comments

skorfmann commented Jun 12, 2023

optimizfx commented Jun 13, 2023

ajesuscode commented Jun 13, 2023

DoIevenLift commented Jun 18, 2023

mvofreire commented Jun 22, 2023

ajesuscode commented Jun 22, 2023

DanielhCarranza commented Jun 28, 2023 • edited Loading

DanielhCarranza commented Jun 28, 2023

BenLyddane commented Jul 4, 2023

salvinoto commented Aug 1, 2023

andersonbcdefg commented Aug 2, 2023

lamebrowndev commented Aug 15, 2023

Shawns2759 commented Aug 18, 2023

Shawns2759 commented Aug 22, 2023

zavbala commented Aug 24, 2023

lamebrowndev commented Aug 24, 2023

bwkam commented Aug 26, 2023 • edited Loading

cristigoia commented Sep 10, 2023

kimhwanhoon commented Sep 14, 2023

jecrs687 commented Feb 6, 2024

ruuuruiya commented Feb 11, 2024

DoIevenLift commented Feb 12, 2024

jecrs687 commented Feb 13, 2024

Trafke011 commented Sep 6, 2024

DanielhCarranza commented Jun 28, 2023 •

edited

Loading

bwkam commented Aug 26, 2023 •

edited

Loading