Repository: next.js
Issue: Error: Invariant: Method expects to have requestAsyncStorage, none available
Labels: bug,linear: next

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Node.js v18.17.0

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.17.0
      npm: 9.6.7
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.13-canary.6
      eslint-config-next: 13.4.10
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A
```


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

App Router

### Link to the code that reproduces this issue or a replay of the bug

https://github.com/dijonmusters/test-next.js-edge-cookies

### To Reproduce

1. Use Edge runtime
2. Pass cookies function to something that calls it at a later time
3. Deploy to Vercel

### Describe the Bug

Edge runtime throws the following error when cookies function is called outside of Route Handler or Server Component:

```
Error: Invariant: Method expects to have requestAsyncStorage, none available
```

```
const supabase = createServerComponentClient({
  cookies,
});

const { data, error } = await supabase.from("tests").select();
```

In this example, `supabase.from` calls the `cookies().get(...)` function. [This](https://github.com/supabase/auth-helpers/blob/main/packages/nextjs/src/routeHandlerClient.ts#L25) is how it gets called by Supabase.

This works perfectly in the Node.js runtime, but fails with Edge. It also works for both Node.js and Edge runtimes when running locally, however, when deployed (in our case to Vercel), it fails with the above error.

By restructuring this slightly to call the `cookies()` function from the Route Handler or Server Component, and then construct another function to return this value, it works in both Node.js and Edge runtimes, deployed to Vercel:

```
const cookieStore = cookies();

const supabase = createRouteHandlerClient({
  cookies: () => cookieStore,
});

const { data, error } = await supabase.from("tests").select();
```

You can check out a deployed example [here](https://test-next-js-edge-cookies.vercel.app/)

This has a link to each option:

1. Route Handler with Edge runtime - does not work ❌
2. Server Component with Edge runtime - does not work ❌
3. Route Handler with Node.js runtime - works ✅
4. Server Component with Node.js runtime - works ✅
5. Route Handler with Edge runtime, calling cookies function from Route Handler - works ✅
6. Server Component with Edge runtime, calling cookies function from Server Component - works ✅

I believe this is related to these issues:
https://github.com/nextauthjs/next-auth/issues/6989
https://github.com/vercel/next.js/issues/46356
https://github.com/vercel/next.js/issues/45371

### Expected Behavior

Expecting this to behave the same in Node or Edge runtime, and not throw the error:

```
Error: Invariant: Method expects to have requestAsyncStorage, none available
```

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

Vercel

<sub>[NEXT-1561](https://linear.app/vercel/issue/NEXT-1561/error-invariant-method-expects-to-have-requestasyncstorage-none)</sub>