Next.js Discord

Discord Forum

Problems using headers, getting "expects to have requestAsyncStorage"

Answered
Giant ichneumon wasp posted this in #help-forum
Open in Discord
Avatar
Giant ichneumon waspOP
Full error:
Collecting page data  ..Error: Invariant: headers() expects to have requestAsyncStorage, none available.
   at f (/Users/.../nextjs-playground/.next/server/chunks/210.js:14:9632)
   at i (/Users/.../nextjs-playground/.next/server/chunks/46.js:5966:4984)
   at /Users/.../nextjs-playground/.next/server/app/page.js:1:2399
   at 44232 (/Users/.../nextjs-playground/.next/server/app/page.js:1:2419)
   at Function.t (/Users/.../nextjs-playground/.next/server/webpack-runtime.js:1:142)
   at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
   at async collectGenerateParams (/Users/st/Documents/Programming/work/hammer-ui/node_modules/.pnpm/next@14.0.3_@babel+core@7.22.17_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/utils.js:884:17)
Answered by Giant ichneumon wasp
This is actually solved by having headers run not at a module level. Basically what was going on was
import { headers } from '...';
export const a = headers().get('a');
when what should've been happening was
import { headers } from '...';
export const a = () => headers().get('a');
. The error is really unintuitive though, and should probably be looked at being improved.
View full answer

2 Replies

Avatar
Giant ichneumon waspOP
Here are the two usages of headers that route should be touching
export const getLocale = () => {
    const host = headers().get('host');

    if (!host) {
        return 'en';
    }

    if (hostnameHasLocale(host)) {
        return host.split('.')[0];
    }

    return 'en';
};
(called twice)

const mobile = userAgent({ headers: headers() }).device.type === 'mobile';
Avatar
Giant ichneumon waspOP
This is actually solved by having headers run not at a module level. Basically what was going on was
import { headers } from '...';
export const a = headers().get('a');
when what should've been happening was
import { headers } from '...';
export const a = () => headers().get('a');
. The error is really unintuitive though, and should probably be looked at being improved.
Answer