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

BayuPrasetyaUtomo · 2024-11-13T17:24:06Z

The issue appears when using SSA in Next JS

Runtime:

Bun version 1.1.34

Package version:

  "convex": "^1.17.0"
  "@auth/core": "0.36.0"
  "@convex-dev/auth": "^0.0.74"
  "next": "^14.2.17"
  "react": "^18.3.1"
  "react-dom": "^18.3.1"

Error message:

 ✓ Compiled middleware in 10ms
 ✓ Compiled in 5ms
 ⨯ 37 |     return f;
38 | }
39 | function getServerError(error, type) {
40 |     let n;
41 |     try {
42 |         throw new Error(error.message);
                       ^
error: `headers` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context

The issue started when adding these lines to the middleware:

// middleware.ts
import { convexAuthNextjsMiddleware } from "@convex-dev/auth/nextjs/server";
 
export default convexAuthNextjsMiddleware();
 
export const config = {
  // The following matcher runs middleware on all routes
  // except static assets.
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

The issue dissapear as soon as the convexAuthNextjsMiddleware was removed from the middleware and changed to Next js default middleware.

// middleware.ts
const middleware = () => {

}

export const config = {
  // The following matcher runs middleware on all routes
  // except static assets.
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

export default middleware;

Minimum folder structure

node_modules .next and public folder has been excluded

  📦project
 ┣ 📂convex
 ┃ ┣ 📂_generated
 ┃ ┃ ┣ 📜api.d.ts
 ┃ ┃ ┣ 📜api.js
 ┃ ┃ ┣ 📜dataModel.d.ts
 ┃ ┃ ┣ 📜server.d.ts
 ┃ ┃ ┗ 📜server.js
 ┃ ┣ 📜auth.config.ts
 ┃ ┣ 📜auth.ts
 ┃ ┣ 📜http.ts
 ┃ ┣ 📜schema.ts
 ┃ ┗ 📜tsconfig.json
 ┣ 📂src
 ┃ ┣ 📂app
 ┃ ┃ ┣ 📜layout.tsx
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂components
 ┃ ┃ ┗ 📂provider
 ┃ ┃ ┃ ┗ 📜auth-client.tsx
 ┃ ┣ 📂styles
 ┃ ┃ ┗ 📜globals.css
 ┃ ┗ 📜middleware.ts
 ┣ 📜.env.local
 ┣ 📜.eslintrc.cjs
 ┣ 📜.gitignore
 ┣ 📜README.md
 ┣ 📜bun.lockb
 ┣ 📜next-env.d.ts
 ┣ 📜next.config.js
 ┣ 📜package.json
 ┣ 📜postcss.config.js
 ┣ 📜prettier.config.js
 ┣ 📜tailwind.config.ts
 ┗ 📜tsconfig.json

Layout

// layout.tsx
import "@/styles/globals.css";
import { ConvexClientProvider } from "@/components/provider/auth-client";

export default function RootLayout({
    children,
  }: Readonly<{ children: React.ReactNode }>) {
    return (
        <html lang="en">
          <body>
            <ConvexClientProvider>{children}</ConvexClientProvider>
          </body>
        </html>
    );
  }

Home

// src/app/page.tsx
"use client";
import { useAuthActions } from "@convex-dev/auth/react";
import { Authenticated, AuthLoading, Unauthenticated } from "convex/react";

export default function HomePage() {
  const { signIn, signOut } = useAuthActions();
  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
      <AuthLoading>Loading...</AuthLoading>

      <Unauthenticated>
        <button onClick={() => void signIn("github")}>Sign in</button>
      </Unauthenticated>
      <Authenticated>
        Hello There!
        <button onClick={() => void signOut()}>Sign out</button>
      </Authenticated>
    </main>
  );
}
</details>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

BayuPrasetyaUtomo commented Nov 13, 2024 •

edited

Loading

Minimum folder structure

Layout

Home

Error: headers was called outside a request scope. #120

Error: headers was called outside a request scope. #120

Comments

BayuPrasetyaUtomo commented Nov 13, 2024 • edited Loading

Runtime:

Package version:

Error message:

Minimum folder structure

Layout

Home

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

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

BayuPrasetyaUtomo commented Nov 13, 2024 •

edited

Loading