NextJS 14.2.4 With-Supabase Build Error - Error: `cookies` was called outside a request scope.

Verify canary release

[X] 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 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 20.5.1
  npm: 10.3.0
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 14.2.4 // Latest available version is detected (14.2.4).
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which example does this report relate to?

with-supabase

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next build

Describe the Bug

Running into a bug in my project. I'm trying test a build locally before building my app into a docker container. I continuing to get the same build error response:

  ▲ Next.js 14.2.4
  - Environments: .env

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
   Collecting page data  ..Error: `cookies` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context
    at getExpectedRequestStore (/Users/aesi-kylem/Documents/Gitlab/testing-build/node_modules/next/dist/client/components/request-async-storage.external.js:28:11)
    at u (/Users/aesi-kylem/Documents/Gitlab/testing-build/.next/server/chunks/544.js:10:3754)
    at a (/Users/aesi-kylem/Documents/Gitlab/testing-build/.next/server/app/page.js:1:4507)
    at 1903 (/Users/aesi-kylem/Documents/Gitlab/testing-build/.next/server/app/page.js:1:4014)
    at t (/Users/aesi-kylem/Documents/Gitlab/testing-build/.next/server/webpack-runtime.js:1:128)
    at 9729 (/Users/aesi-kylem/Documents/Gitlab/testing-build/.next/server/app/page.js:1:1631)
    at t (/Users/aesi-kylem/Documents/Gitlab/testing-build/.next/server/webpack-runtime.js:1:128)
    at r (/Users/aesi-kylem/Documents/Gitlab/testing-build/.next/server/app/page.js:1:5582)
    at /Users/aesi-kylem/Documents/Gitlab/testing-build/.next/server/app/page.js:1:5621
    at t.X (/Users/aesi-kylem/Documents/Gitlab/testing-build/.next/server/webpack-runtime.js:1:1206)

> Build error occurred
Error: Failed to collect page data for /
    at /Users/aesi-kylem/Documents/Gitlab/testing-build/node_modules/next/dist/build/utils.js:1268:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
   Collecting page data  .error: script "build" exited with code 1

I'm using the with-supabase template and this error is suggesting a mishandling of the cookies call which is giving the out of scope error. The error seems to bounce from the root / page and my /projects. Both are a fairly standard setup of a page.tsx server async component (default) awaiting fetches from a "use server" actions file that fetches from my supabase DB and passes the data down to client components as props.

Simplified Page.tsx minus the props client pass:

   // app/page/page.tsx

import { getLatestProjects } from "@/libs/actions/actions";

async function Page() {
  const projects = await getLatestProjects();
  return (
    <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8 max-w-[90vw] mx-auto">
      <ul className=" text-black">
        {projects?.map((project) => (
          <li key={project.id}>{project.name}</li>
        ))}
      </ul>
    </main>
  );
}

export default Page;

actions.ts:

"use server"

import { createClient } from "@/utils/supabase/server";

const supabase = createClient();

export async function getLatestProjects() {
    let { data: projects, error } = await supabase
  .from('new_projects')
  .select('*')
  .order('end_date', { ascending: false })
  .limit(10);

    if (error) throw error;

    return projects;
}

To troubleshoot I created a fresh new project using npx create-next-app -e with-supabase and copied over only my .env file and the simplified code you see above to test. When running next build i get the same error.

Expected Behavior

No error should be present when running next build with this project, especially, with no extra config changes to any of the boilerplate auth/session/cookie handling code in the with-supabase,

To Reproduce

Pull down or create a fresh Next app using the with-supabase example: npx create-next-app -e with-supabase
Rename the .env.example to .env and provide your NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

Create a table with some dummy data of at least id and name. Create an actions file in /lib/actions/actions.ts. Paste the below fetch using the supabase client to your dummy data:
```
import { createClient } from "@/utils/supabase/server";
```

const supabase = createClient();

export async function getTest() { let { data: test, error } = await supabase .from('your_db') .select('*') .limit(10);

if (error) throw error;

return test;

}


4. Remove all boilerplate content from `app/page.tsx` and replace with the following:

// app/page/page.tsx

import { getTest } from "@/libs/actions/actions";

async function Page() { const tests = await getTest(); return (

{test.name}

); }

export default Page;



5. Test that the app runs with `next dev` and that your dummy data shows  on page at `http://localhost:3000/`
6. Finally, run `next build`, this is where it will error our citing `Collecting page data  ..Error: `cookies` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context`

vercel / next.js