[NEXT-644] cookies broke on 13.2.1 Invariant: Method expects to have requestAsyncStorage, none available

[cipriancaba]

Verify canary release

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

Provide environment information

Operating System:
Platform: linux
Arch: x64
Version: Ubuntu 20.04.0 LTS Fri Feb 24 2023 12:23:18 GMT+0200 (Eastern European Standard Time)
Binaries:
Node: 16.14.2
npm: 7.17.0
Yarn: 1.22.19
pnpm: 7.13.6
Relevant packages:
next: 13.2.1
eslint-config-next: N/A
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://stackblitz.com/edit/vercel-next-js-gqeapg?file=package.json,app%2F[variant]%2F(shop)%2Fp%2F[[...id]]%2Fpage.tsx,next.config.js

To Reproduce

Try to import cookies from next/headers
Try to access a dynamic page, eg /test/p

Describe the Bug

Error: Invariant: Method expects to have requestAsyncStorage, none available

This happens if I do an import of cookies

import { cookies } from 'next/headers';

const DynamicPage = async () => {
  const nextCookies = cookies();
  console.log(nextCookies.get('random'));
  const data = await loadRandomData();

  return <div>{data.title}</div>;
};

Expected Behavior

I can access the cookies object on a dynamic page

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-644

[ayhanap]

Not sure if its related but happens when I access cookies() outside of an async function.

import { cookies } from 'next/headers';

//gives same error when used here
const hello = cookies().get('access_token')?.value;

export default async function FeedbackPage(props: FeedbackPageProps) {

//works ok inside here
....
...
}

[wyattjoh]

In order to access cookies(), it must be done inside a component or a route, you can't access it from the global scope @ayhanap.

[frankimhof]

I also got this error, but was able to fix it.

I am using experimental App directory (appDir: true).

I got the error when calling getServerSession(authOptions) (imported from next-auth)
inside of an API Route handler function.

Fixed it by also providing req and res (from the API Route handler) as arguments to getServerSession:
getServerSession(req, res, authOptions)

[jgb-solutions]

@frankimhof hey thank you! This helps me get tRPC working with next 13 app dir. <3 I was having a hard time getting the session for the context.

[talbertherndon]

I also got this error, but was able to fix it.

I am using experimental App directory (appDir: true).

I got the error when calling getServerSession(authOptions) (imported from next-auth) inside of an API Route handler function.

Fixed it by also providing req and res (from the API Route handler) as arguments to getServerSession: getServerSession(req, res, authOptions)

@frankimhof Where exactly is this file and how are you calling user session?

[jgb-solutions]

@talbertherndon import { ServerResponse } from "http"

[VyMajoris]

I also got this error, but was able to fix it.

I am using experimental App directory (appDir: true).

I got the error when calling getServerSession(authOptions) (imported from next-auth) inside of an API Route handler function.

Fixed it by also providing req and res (from the API Route handler) as arguments to getServerSession: getServerSession(req, res, authOptions)

This would not work for me because I'm using getServerSession inside a multer fileFilter function, I don't have access to the response there. At least not that I'm aware.

[jgb-solutions]

You get the request out of the context passed to getServersideProps' context.

[VyMajoris]

@jgb-solutions

I know, but this is on an API: https://github.com/Global-Conflicts-ArmA/global-conflicts-website/blob/6412171e640ebbff34c99f60d37fc5387554c66e/pages/api/missions/%5BuniqueName%5D/update.ts#L89

I'm trying some hacks to see if I can get the session there.

[dlamprey]

is this still an issue in @latest?

├─┬ @next-auth/[email protected]
│ └─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

I am getting the error with this (in pages/api):

import { cookies } from 'next/headers';

export default async function handler(req, res) {
const cookieKey = 'some-cookie-key';
console.log('cookieValue', cookies().get(cookieKey))

Error:

error - node_modules\next\dist\client\components\headers.js (56:14) @ cookies
error - Error: Invariant: Method expects to have requestAsyncStorage, none available
at cookies (webpack-internal:///(api)/./node_modules/next/dist/client/components/headers.js:52:15)
at handler (webpack-internal:///(api)/./pages/api/setGetReaction.js:27:91)

[reesmanp]

I am getting this error on latest and with canary.

[dlamprey]

I am getting this error on latest and with canary.

@reesmanp nice to know it is not just me. is this broken for everyone? are other just getting the cookie on the front end? i am wondering why others aren't speaking up. i would hate to downgrade to 12.x.

[verdrangen]

I am getting this error on latest and with canary.

@reesmanp nice to know it is not just me. is this broken for everyone? are other just getting the cookie on the front end? i am wondering why others aren't speaking up. i would hate to downgrade to 12.x.

Same here. Trying to access headers but having this issue too.

[RobinNagpal]

I get it in my Root Layout in nextjs 13

interface RootLayoutProps {
  children: React.ReactNode;
}

export default async function RootLayout({ children }: RootLayoutProps) {
  const session = await getServerSession(authOptions);

Here is the error

warn  - Fast Refresh had to perform a full reload due to a runtime error.
error - node_modules/next/dist/client/components/headers.js (39:14) @ headers
error - Error: Invariant: Method expects to have requestAsyncStorage, none available
    at RootLayout (./src/app/layout.tsx:34:86)
n

[reesmanp]

i would hate to downgrade to 12.x.

I don't think you need to downgrade. Since this is the app directory and in 13 you don't need to use the app directory and the pages directory is stable, you can maintain using 13. We're using v13 on pages but are looking to migrate to app.

[reesmanp]

@wyattjoh it looks like the code path for retrieving cookies and headers calls new globalThis.AsyncLocalStorage() then immediately calls getStore without a run or enterWith function call... Where exactly is the store supposed to be coming from?

[reesmanp]

Downgrading to 13.2.0 (from 13.4.0), it works.

[dlamprey]

thanks @reesmanp for sharing your insight about this issue. i was pretty sure I tried 13.2.0 before but just did so again and am getting the same error:

error - node_modules\next\dist\client\components\headers.js (34:14) @ cookies
error - Error: Invariant: Method expects to have requestAsyncStorage, none available
at cookies (webpack-internal:///(api)/./node_modules/next/dist/client/components/headers.js:34:15)

├─┬ @next-auth/[email protected]
│ └─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

[lk9100]

on the latest 13.4.1 release, having the same issue.

[salvinoto]

Having this issue as well, using server actions on 13.4.1 release

[SvemirskiHod]

Having the same issue with server actions on 13.4.1 with next-auth's getServerSession as well as with cookies and headers from "next/headers"

[vitalyliber]

@lk9100 @salvinoto @SvemirskiHod just upgrade NextJS to the v13.4.2-canary.3 version.

[lk9100]

@lk9100 @salvinoto @SvemirskiHod just upgrade NextJS to the v13.4.2-canary.3 version.

@vitalyliber

have just installed v13.4.2-canary.3
same error

[tmns]

^^ Also on 13.4.2-canary.3 and getting the same error when invoking getServerSession from a server action.

[hgogoi2012]

I am also getting the same error.

[timneutkens]

Hey, could you open a new issue with a reproduction so that we can have a look?

[lk9100]

i can't reproduce this anymore after a clean npm install with latest canary.

@timneutkens thanks for the heads up 👍

[lukevers]

Hey @timneutkens, let me see if I can get a reproduction for you, but I just got this same error while testing transitioning a server action passed down from the page to a client component to having the client component have direct access to it. I just upgraded my dependencies and see this exact issue.

[lukevers]

@timneutkens https://github.com/lukevers/next-644

OK so I initially had cookies().get('anything'); which did cause issues, but not on 13.4.2-canary.5. I do still get these errors, but not with cookies directly, I get them when I'm using getServerSession from import { getServerSession } from 'next-auth/next'; -- I'm not sure if this is a nextjs issue or a next-auth issue since cookies directly seem to work OK.

I have two pages that define two situations:

• /issue1 - "individual server components" - The main issue here is that when we access cookies through a server component imported from a client component, it does not work. It works if we import it in a server component (page layout here) and pass it to the client component as a prop.
• /issue2 - "shared server component" - The issue here is that when we access cookies through a server component imported from a client component, it does not work. It also does not work even if it was passed through to the client component if the server component is the same component

[lukevers]

@timneutkens I came to the conclusion this is related to next-auth after my related closed issue (here), but I wanted to debug it more so I copied the code locally and when I use the same code (but not imported from the library), grabbing my session information works.

import { getServerSession } from 'next-auth/next';
import { __internal__unstable__getSession } from './_internal_session';

// uses from next-auth
export async function getSession() {
  return await getServerSession({});
}

// uses a copied version locally
export async function __unstable__getSession() {
  return await __internal__unstable__getSession({});
}

Is there anyway this could somehow be related to the bundler?

lukevers/next-644@ca99b9e

On /local in that repo, both of the buttons work now. The difference here between this one and the previous one is:

local version:

'use server';

import { __unstable__getSession } from "@/util/session";

export default async function ServerExample(message: string) {
  return await __unstable__getSession();
}

using the library's function:

'use server';

import { getSession } from '@/util/session';

export default async function ServerExample(message: string) {
  return await getSession();
}

[ammarriq]

i only get this error when any of the server actions from a single file is imported inside client component

[Hiieu]

Can we re-open the issue? This error is still happening in v13.4.4-canary.0.

[Hiieu]

What I did to solve the problem is replacing the entire cookies implementation from NextJS with the cookies-next library.

[timneutkens]

Please see my earlier comment, we can investigate if you provide a reproduction in a new issue, instead you're posting additional comments here without a reproduction 😢 Thank you very much 🙏
#46356 (comment)