Ahmad Awais

NAVIGATE


SHARE


Supabase with Next.js App Router Fix for Invariant: cookies() expects to have requestAsyncStorage, none available

Ahmad AwaisAhmad Awais

Next.js App router is pretty awesome. Sadly, it’s super new. The errors you face are sometimes hard to debug as you can’t see where it’s coming from and why. I hope they fix it soon.

Supabase is pretty awesome, too. I’ve been using it as a backend, database, file storage, and, most importantly, as an authentication service for one of my production Next.js app router-based apps.

Invariant: cookies() expects to have requestAsyncStorage, none available#

It’s all good and well on the localhost, but when you try to deploy it, most of us face the dreaded Invariant: cookies() expects to have requestAsyncStorage, none available error. There are a lot of ideas on this GitHub issue, but sadly none worked.

Fix: The async function: cookies() expects requestAsyncStorage, none available#

And then I went down the rabbit hole with console logging everything to figure out that well cookies probably need to be awaited since the React Server Components are async functions.

Lo and behold, that was it. Making it an async call fixed it for me.

Now I have a file called lib/supabase.ts which looks like this:

import {
	createClientComponentClient,
	createRouteHandlerClient,
	createServerActionClient,
	createServerComponentClient,
} from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { cache } from 'react';
import 'server-only';

export const dynamic = 'force-dynamic';

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

export const getDbOnAction = cache(async () => {
	const cookieStore = cookies();
	return createServerActionClient<Database>({ cookies: () => cookieStore });
});

export const getDbOnRoute = cache(async () => {
	const cookieStore = cookies();
	return createRouteHandlerClient<Database>({ cookies: () => cookieStore });
});

Note the async nature of all the functions. I know nothing is awaited but the function now returns a promise and can be awaited in a server component, route, or an action. And that way, we get the cookies.

Usage#

You can use these functions in your React server components, actions, and API routes. Like this:

// React Server Component.
import { getDbOnSever } from '@/lib/db-server';
import { cache } from 'react';

export const dynamic = 'force-dynamic';

export default async function Page() {
	const getApps = cache(async () => {
		const supabase = await getDbOnSever();
		const { data: apps, error } = await supabase.from('apps').select();
		return apps;
	});

	const apps = await getApps();

	<pre>{JSON.stringify(apps, null, 2)}</pre>;
}

Conditions#

  1. Async/Await: React Server Component, Server Action, or API Route should all be async functions where you await the db client as shown above.
  2. Dynamic it is: Remember to use export const dynamic = 'force-dynamic'; as recommended by Supabase. Read more about it on docs.

That’s it and that’s all. Use your code for good!

Peace! โœŒ๏ธ

Founder & CEO at Langbase.com โ€” Ship composable hyper-personalized Al apps in seconds ยท Ex VP DevRel Eng. Rapid ยท Google Developers Advisory Board (gDAB) founding member. ๐Ÿง‘โ€๐Ÿ’ป AI/ML/DevTools Angel Investor โฏ AI/ML Advisory Board member San Francisco, DevNetwork

๐ŸŽฉ Award-winning Open Source Engineer & Dev Advocate ๐ŸฆŠ Google Developers Expert Web DevRel ๐Ÿš€ NASA Mars Ingenuity Helicopter mission code contributor ๐Ÿ† 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer).

๐ŸŒณ Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator. ๐Ÿ“Ÿ Teaching thousands of developers Node.js CLI Automation (100 videos ยท 22 Projects) & VSCode.pro course. Over 142 million views, 24 yrs Blogging, 108K developers learning, 200+ FOSS.

โœŒ๏ธ Author of various open-source dev-tools and software libraries utilized by millions of developers worldwide โ“ฆ WordPress Core Developer ๐Ÿ“ฃ TEDx Speaker with 100+ international talks.

โœจ As quoted by: Satya Nadella ยท CEO of Microsoft โ€” Awais is an awesome example for developers.
๐Ÿ™Œ Leading developers and publishing technical content for over a decade ๐Ÿ’œ Loves his wife (Maedah) โฏ Read more about Ahmad Awais.

๐Ÿ‘‹โ€ฆ Awais is mostly active on ๐• @MrAhmadAwais

๐Ÿ“จ

Developers Takeaway

Stay ahead in the web dev community with Ahmad's expert insights on open-source, developer relations, dev-tools, and side-hustles. Insider-email-only-content. Don't miss out - subscirbe for a dose of professional advice and a dash of humor. No spam, pinky-promise!

โœจ 172,438 Developers Already Subscribed
Comments 0
There are currently no comments.