pvman
pvman3mo ago

> Error: Invariant: headers() expects to have requestAsyncStorage, none available

Hi, I use trpc v1045.1 in next 14.1 app router. I call it server side and have the following.
export async function createContext(opts: CreateNextContextOptions) {
const { session, user } = await getUserAuth();

return {
db,
session,
user,
...opts,
};
};

export const createServerApi = cache(async () => {
const heads = new Headers(headers());
heads.set("x-trpc-source", "rsc");

const context = await createTRPCContext({
headers: heads,
});

return createCaller(context);
});

export const api = await createServerApi();
export async function createContext(opts: CreateNextContextOptions) {
const { session, user } = await getUserAuth();

return {
db,
session,
user,
...opts,
};
};

export const createServerApi = cache(async () => {
const heads = new Headers(headers());
heads.set("x-trpc-source", "rsc");

const context = await createTRPCContext({
headers: heads,
});

return createCaller(context);
});

export const api = await createServerApi();
It is working on a static route but on a dynamic route /edit/[slug] I get the following error (coming from the headers() in createServerApi):
Error: Invariant: headers() expects to have requestAsyncStorage, none available
Any idea how I could solve this?
4 Replies
BeBoRE
BeBoRE3mo ago
You need to call createServerApi from within your server component, you are currently calling headers() outside of Next
pvman
pvman3mo ago
Oh ok, but why is it working for static route? So no way to have a single function to call in the server ? I have to do :
const api = await createServerApi();
const post = await api.posts.getPostById(slug);

const api = await createServerApi();
const post = await api.posts.getPostById(slug);

But would like to only have to do : const post = await api.posts.getPostById(slug);
BeBoRE
BeBoRE3mo ago
You can do that in v11 not in v10. In v10 you’ll have to use this pattern, or you’d have to use a proxy probably
pvman
pvman3mo ago
Thanks a lot for the clarification and for helping @BeBoRE , really appreciate!
More Posts
How do I exclude properties while returning data?I basically need to create a dto's that would exclude properties like access keys etc. while returniDoes anyone have an example of subscriptions implemented in CloudFlare Workers?I'm trying to use subscriptions via WebSocket in CloudFlare Workers, but it's been a real pain so faTRPCClientError: Unable to transform response from serverI am currently encountering this error occasionally in my apps. I am using a Monorepo, which includeUnexpected tokenWorks fine locally, doesn't work when deployed to AWS via sst.dev. Was working last night. RedeployeContext is not being passed correctlyI will include my setup at the end. My problem is that I am using nextauth with database sessions anHow to get the Request Body data of QStashHello everyone. I'm currently working on a client project that involves using trpc with Next.js. We'Preventing uncaught error propagation from server to clientHello guys, is there any way to create default error handler? I want to avoid leaking internal inforThrowing something other than `Unexpected token '<', "<!DOCTYPE "... is not valid JSON`I'm trying to do custom error handling but whatever I throw just ends up being `Unexpected token '<'Create client that is used in every request, without re-creating clientHi all, Consider the following ``` export const createContextInner = async ({ req, res, }: { Using TRPC Server Caller in client side.What's up TRPCer. so i'm currently working in vanilla react app with seperate backend in .NET, in p