Error when importing supabase from createServerClient in generateStaticParams - Next js 13

Question

I'm migrating my app from nextjs 12 to nextjs 13 and I'm having some trouble migrating my [...slug].tsx file.

I started with a simple code snippet but I'm getting this error:

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

My new page is under [user-profile], under /app.

import * as React from "react";
import { createServerClient } from "../../lib/supabase-server";

// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const supabase = createServerClient();
  const { data: profiles } = await supabase.from("user").select("username");

  if (!profiles) {
    throw new Error("No profiles found");
  }

  return profiles.map((profile) => ({
    slug: profile,
  }));
}

export default async function Page({
  params,
}: {
  params: { ["user-profile"]: string };
}) {
  return <div>here</div>;
}

And the createServerClient() file goes like this:

import { headers, cookies } from "next/headers";
import { createServerComponentSupabaseClient } from "@supabase/auth-helpers-nextjs";
import { Database } from "../ts/models/database-types";

export const createServerClient = () =>
  createServerComponentSupabaseClient<Database>({
    headers,
    cookies,
    supabaseKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_PUBLIC,
    supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_PROJECT_URL,
  });

My idea is to render all the users in mydomain.com/username-example, and I can't get over this error. Can anybody help me, please?

This seems to be a next.js 13 issue, see here: https://github.com/vercel/next.js/issues/45371 — thorwebdev, May 08 '23 at 04:25

score 0 · Answer 1 · answered Jul 29 '23 at 17:27

Found the solution in this Thread

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { Database } from "@/lib/types/schema";
import { cookies } from 'next/headers'
import { cache } from 'react';

export const createServerClient = cache(() => {
    const cookieStore = cookies()
    return createServerComponentClient<Database>({
        cookies: () => cookieStore
    })
})

export async function GET() {
    const supabase = createServerClient()

    const { data, error } = await supabase.from('').select('')

    return data
}

Let me know if this works for you.

Error when importing supabase from createServerClient in generateStaticParams - Next js 13

1 Answers1