Next.js Discord

Discord Forum

Error: `headers` was called outside a request scope.

Unanswered
Nile tilapia posted this in #help-forum
Open in Discord
Nile tilapiaOP
Hello, I am trying to use next-auth@beta (v5, so authjs now?) in order to make a privately accessible page, and I need to have i18n features, so I'm also using inlang/paraglide for that.

Everything is working as intended when I do npm run dev, authjs lets me use oauth providers, my database is populated without issues and localizations/translations are working as intended.

However, when I run the npm run build command, I run into an Error: ``headers`` was called outside a request scope..

Here is the complete stack trace:

ℹ [paraglide] Compiling inlang project at "./project.inlang".                                                                                                                                              
Using existing cloned repo
ℹ [paraglide] Successfully compiled the project.                                                                                                                                                           
  ▲ Next.js 14.2.5
  - Environments: .env.local, .env

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
   Collecting page data  ...Error: `headers` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context
    at getExpectedRequestStore (/home/lisieshy/dev/web/test-nextjs/node_modules/next/dist/client/components/request-async-storage.external.js:28:11)
    at c (/home/lisieshy/dev/web/test-nextjs/.next/server/chunks/413.js:1:1973)
    at y (/home/lisieshy/dev/web/test-nextjs/.next/server/chunks/526.js:2:22059)
    at /home/lisieshy/dev/web/test-nextjs/.next/server/chunks/893.js:1:27270
    at /home/lisieshy/dev/web/test-nextjs/.next/server/app/page.js:1:12517
    at 81529 (/home/lisieshy/dev/web/test-nextjs/.next/server/app/page.js:1:12523)
    at t (/home/lisieshy/dev/web/test-nextjs/.next/server/webpack-runtime.js:1:127)
    at 48925 (/home/lisieshy/dev/web/test-nextjs/.next/server/app/page.js:1:1364)
    at t (/home/lisieshy/dev/web/test-nextjs/.next/server/webpack-runtime.js:1:127)
    at a (/home/lisieshy/dev/web/test-nextjs/.next/server/app/page.js:1:15765)

> Build error occurred
Error: Failed to collect page data for /
    at /home/lisieshy/dev/web/test-nextjs/node_modules/next/dist/build/utils.js:1268:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}


I actually have no idea where to even start debugging this issue, since I can't really tell what is actually using the headers. Any idea how I could debug this in a slightly better way? Thanks

41 Replies

Nile tilapiaOP
Tried a bit more stuff, I think the issues comes from me using a redirect() call from within my main page.tsx file.

const Dashboard: React.FC = async () => {
  const isAuthenticated = await checkIsAuthenticated();

  if (!isAuthenticated) {
    redirect("/login"); // when removed, npm run build works.
  } else {
    return <DashboardPage />;
  }
}


is it not possible to redirect from within the root page.tsx (/src/app/page.tsx) ?
chisto
I think you can't redirect to another page if this one hasn't finish rendering
you can either try the if condition inside an useEffect either here or pass the isAuthenticated to the client component to not kill the server side things and do it inside there, or do it on the middleware
Nile tilapiaOP
wouldn't using useEffect make the page a client component instead of a server one?
Nile tilapiaOP
Just tried, same error
@Nile tilapia wouldn't using `useEffect` make the page a client component instead of a server one?
Nile tilapiaOP
Converted it to a client component, using useEffect/useState and it is running npm run build without errors.
Double-striped Thick-knee
idk why but using redirect function inside server component should work, I've been doing it for ages
Nile tilapiaOP
Yeah I think this might actually be an issue from paraglide instead of nextjs directly then
since I'm using the redirect given by the navigation strategy put in place in order to handle locales through URLs (/fr, /de, /es..). and this redirect probably does some wonky things behind the scenes
Nile tilapiaOP
Yes, it works in the case of my /login page, which redirects users to / using that redirect function if they are already logged in
import { redirect } from "@/lib/i18n";

const SignIn: React.FC = async () => {
  const isAuthenticated = await checkIsAuthenticated();
  if (isAuthenticated) {
    redirect("/");
  } else {
    return <SignInPage />
  }
}
I do it like that in my /login/page.tsx, and it works. So the issue really only happens in root page?
Double-striped Thick-knee
what happens if you redirect without calling this function checkIsAuthenticated
Nile tilapiaOP
Seems to be working
Redirects without complaining, and npm run build does not throw an error
(the component is basically this for testing: 
const SignIn: React.FC = async () => {
  redirect("/");
}
)
@Nile tilapia Seems to be working
Double-striped Thick-knee
looks like it's the culprit
you're redirecting from that too?
Nile tilapiaOP
yeah
Starting to reconsider the choice of keeping the locale in the url, seems to be causing more issues than it solves
@Nile tilapia yeah
Double-striped Thick-knee
can you remove it and try?
btw I'm talking about isAuthenticated function
what is it doing
Nile tilapiaOP
It's a server action that checks if a session exists or not
"use server";

import { auth } from "@/lib/auth/authConfig";

export const checkIsAuthenticated = async () => {
    const session = await auth();
    if (session)
        return true;
    return false;
};
Double-striped Thick-knee
try to call the auth function directly inside server component. see if it helps
Nile tilapiaOP
changes nothing
the only thing that seems to cause my issue of npm run build not working is whether or not I'm using the paraglide redirect() or not
@Nile tilapia the only thing that seems to cause my issue of npm run build not working is whether or not I'm using the paraglide redirect() or not
Double-striped Thick-knee
is it inside auth function? I never heard of that package
Nile tilapiaOP
paraglide is not related to authjs, it's what I use in order to handle i18n in the project
@Double-striped Thick-knee is it inside auth function? I never heard of that package
Nile tilapiaOP
and also no, that redirect() is in the default component exported in my main page.tsx file
src/app/page.tsx
import { redirect } from "@/lib/i18n";

import * as m from "@/paraglide/messages.js"
import { Metadata } from "next";

import { checkIsAuthenticated } from "@/lib/auth/checkIsAuthenticated";
import React from "react";
import { DashboardPage } from "./dashboard";

export const metadata: Metadata = {
  title: m.dashboard_title(),
}

const Dashboard: React.FC = async () => {
  const isAuthenticated = await checkIsAuthenticated();

  if (!isAuthenticated) {
    redirect("/login");
  } else {
    return <DashboardPage />;
  }
}

export default Dashboard;

is basically the whole file
@Nile tilapia paraglide is not related to authjs, it's what I use in order to handle i18n in the project
Double-striped Thick-knee
do you think its nextjs compatible?
Double-striped Thick-knee
hmmm, i'm curious about this import { redirect } from "@/lib/i18n";
Nile tilapiaOP
It's a i18n.ts file automatically generated by their init command
exports a middleware function and the Link, useRouter, usePathname, redirect, permanentRedirect functions
That are made to handle locales
Double-striped Thick-knee
I'm out of ideas 🫠
Nile tilapiaOP
You've been a great help in finding the root cause of it though, so thanks for that!
I'll continue trying stuff and seeing what works and what doesn't
Double-striped Thick-knee
good luck