Next.js+Supabase生产环境requestAsyncStorage缺失问题及解决

部署在Cloudflare的生产环境中，Next.js抛出错误：Invariant: Method expects to have requestAsyncStorage, none available。该错误仅出现在服务器组件中，本地环境无此问题。

错误触发场景 #

生产环境的服务器组件中从Supabase数据库获取数据时触发，本地环境无此问题。

依赖版本 #

"@supabase/auth-helpers-nextjs": "^0.7.3",
"@supabase/supabase-js": "^2.31.0",
"next": "13.4.12",

Dashboard组件代码 #

import { createServerSupabaseClient, getSession } from "@/components/supabase/supabase-server";

export default async function Dashboard() {
    const supabase = createServerSupabaseClient() // 此代码运行正常
    const serverSession = await getSession() // 此代码运行正常
    const userInfo = serverSession?.user

    const pending = await supabase
        .from('table')
        .select('*', { count: 'exact', head: true })
        .eq('username', userInfo.user_metadata.username)
        .eq('status', 0)

    // 错误触发位置：
    console.log("ERROR [PENDING] DETAILS: ", JSON.stringify(pending, null, 2))
}

supabase-server.js代码 #

import { cookies } from 'next/headers';
import { cache } from 'react';
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';

export const createServerSupabaseClient = cache(() =>
    createServerComponentClient({ cookies })
)

export async function getSession() {
    const supabase = createServerSupabaseClient()
    try {
        const {
            data: { session }
        } = await supabase.auth.getSession()
        return session
    } catch (error) {
        console.error('Error:', error)
        return null
    }
}

middleware.js代码 #

import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'

export async function middleware(req) {
    const res = NextResponse.next()
    const supabase = createMiddlewareClient({ req, res })
    await supabase.auth.getSession()
    return res
}

补充信息 #

推测问题源于next/headers包，但本地环境无此问题的原因尚不明确。客户端组件在本地和生产环境均运行正常，不想使用属性透传（prop drilling）。

已尝试的方案：

• 使用server-only包
• 移除react中的cache()
• 直接在Dashboard组件中调用createServerComponentClient而非导入

TypeScript版本 #

'use server'
import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'
import { Database } from '@/lib/db_types'

const cookieStore = cookies()
const supabase = createServerActionClient<Database>({
  cookies: () => cookieStore
})

JavaScript版本（supabase-server.js） #

import { cookies } from 'next/headers';
import { cache } from 'react';
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';

export const createServerSupabaseClient = cache(() => {
    const cookieStore = cookies()
    return createServerComponentClient({ cookies: () => cookieStore })
})

export async function getSession() {
    const supabase = createServerSupabaseClient()
    try {
        const {
            data: { session }
        } = await supabase.auth.getSession()
        return session
    } catch (error) {
        console.error('Error:', error)
        return null
    }
}

内容的提问来源于stack exchange，提问作者Emre