NextJS 14.2.4 With-Supabase Build Error - Error: `cookies` was called outside a request scope. about next.js HOT 9 OPEN

I was having a similar issue, I was able to fix it by ensuring that my createClient() statements are within the functions of my code. For example, your actions.ts should be updated to the below:

Actions.ts

"use server"

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

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

    if (error) throw error;

    return projects;
}

from next.js.

can confirm that the problem is in fact usage of createClient() out of function scope aka usage as global variable.

from next.js.

I am also facing same issue, have you been able to resolve this problem?

from next.js.

hmm i am also getting the same error when using supabase/server.ts

import { createServerClient, type CookieOptions } from '@supabase/ssr'
import { cookies } from 'next/headers'

export function createClient() {
  const cookieStore = cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options),
          )
        },
      },
    },
  )
}

It happens when i am making a stripe webhook call and want to save user's data in supabase, it is working fine it i directly use supabase

import { createClient } from '@supabase/supabase-js'


const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
)

from next.js.

I have encountered the same problem.
What is strange this problem occurs with me only on a specific route. On other route pages where I have basically almost identical logic the problem does not occur.

Interestingly - With the same code, a week ago, everything worked. Isn't this a problem maybe with Supabase?

I'm using Next 14.2.3
Problem occurs on local server - npm run dev

from next.js.

I have encountered the same problem. What is strange this problem occurs with me only on a specific route. On other route pages where I have basically almost identical logic the problem does not occur.

Interestingly - With the same code, a week ago, everything worked. Isn't this a problem maybe with Supabase?

I'm using Next 14.2.3 Problem occurs on local server - npm run dev

Interesting, I haven't had the issue in dev so far, just the build step. Which I needed to work in order to build a docker container for hosting but also would assume I would get errors if I pushed to Vercel or others.

I'm on 14.2.4 but when i started this project I think it was 14.2.1. As well, I have used both NPM and Bun, with and without turbopack enabled.

from next.js.

I was having a similar issue, I was able to fix it by ensuring that my createClient() statements are within the functions of my code. For example, your actions.ts should be updated to the below:

Actions.ts

"use server"

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

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

    if (error) throw error;

    return projects;
}

Hmm, this makes sense. Prior to posting here I did run a bunch of google searches and the only thread or mention I could find did talk about making sure my cookies() call was inside my function. But I was not directly using that anywhere in my app. However I didn't think about that pass down of the cookies that are called in the supabase client.

I will give this a shot, I did already find a workaround of sorts. I just moved all the calls to my Page.tsx component rather than refactoring to the actions file. This works but was still puzzled as to why a pattern I have used everywhere else seemingly was not allowed?

Thanks for the suggestion! I will update if that works for me.

from next.js.

Ok I also fixed my problem

Here is how my action.ts looks like now

"use server";

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

export async function getAllClients() {
  const supabase = createClient();

  const { data } = await supabase.from("profiles").select();

  return data ?? [];
}

export async function getSpecificClient(clientId: string) {
  const supabase = createClient();

  const { data } = await supabase
    .from("profiles")
    .select()
    .eq("id", clientId)
    .single();

  return data;
}

In a previous version of this file, I declared const supabase = createClient() once right after importing the file.
Unfortunately, the initialization of the supabase has to be done separately inside each exported function. I don't like such duplication of code 😢

from next.js.

yea the soln is just to find any where you called createClient that is not inside a function , dont call your createClient in a global scope

from next.js.