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

[bengrau]

Environment

System:
OS: macOS 11.6.1
CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
Memory: 658.60 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 18.0.0 - /usr/local/bin/node
npm: 8.19.2 - /usr/local/bin/npm
Browsers:
Brave Browser: 111.1.49.120
Chrome: 111.0.5563.64
Firefox: 110.0.1
Firefox Developer Edition: 112.0
Safari: 15.0

Reproduction URL

next-auth-example

Describe the issue

I am coding in VS Code. If I want to debug everything is working fine but if I call const session = await getServerSession(authOptions) I get the error "Error: Invariant: Method expects to have requestAsyncStorage, none available".

I am using the following Debug Config:

{ "version": "0.2.0", "configurations": [ { "name": "Next.js: debug server-side", "type": "node-terminal", "request": "launch", "command": "npm run dev" }, ] }

How to reproduce

Please use the above VS Code launch.json settings and debug a next.js project. When calling a page.tsx with const session = await getServerSession(authOptions) you should get the same error.

Expected behavior

I would expect to be able to debug the session variable here.

[balazsorban44]

This error comes from Next.js and not next-auth.

You can try following one of these issues:

vercel/next.js#46356
vercel/next.js#45371

[Divinebosst]

Make sure you are not importing a Server component into a Client Component. In my case, I was using getServerSession in a Navbar Component, which was then imported into the root page.jsx (client component) and it triggered that error (Next.js v13.4.5 and Next-Auth v4.22.1)

[jmilus]

Does this extend to a Server Component being a child of a Client Component (Client wrapping Server)?
If so, how do I use Context wrappers with pages?

[Divinebosst]

No, this only happened when I directly imported a Server component into a Client component.

[yarabramasta]

Make sure you are not importing a Server component into a Client Component. In my case, I was using getServerSession in a Navbar Component, which was then imported into the root page.jsx (client component) and it triggered that error (Next.js v13.4.5 and Next-Auth v4.22.1)

In my case, if i tryna use page.tsx with 'use client' it will cause that error. I'm using next v13.4.10 and next-auth v4.22.3

[bookinlife]

i use nextauth, and i solve it by server action.

"use server"; export const LoginOut = async () => { await signOut(); };
import into client compoent:
<form action={LoginOut}> <button> Sign Out</div> </button> </form>

form is needed