Next.js 15 canary with experimental PPR + dynamicIO issue calling headers()

[Jussinevavuori]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/Jussinevavuori/clerk-next15-ppr-dynamicio-headers-issue

Publishable key

pk_test_ZnJlc2gtcmFtLTkxLmNsZXJrLmFjY291bnRzLmRldiQ

Description

Steps to reproduce:

1. Clone reproduction repo.
2. Install dependencies with bun install.
3. Copy .env.example as .env and set up the required Clerk .env variables.
4. Run with bun dev.

Expected behavior:

Should not cause any errors.

Actual behavior:

Causes below error.

 ⨯ unhandledRejection: Error: Clerk: auth() and currentUser() are only supported in App Router (/app directory).
If you're using /pages, try getAuth() instead.
Original error: Error: During prerendering, `headers()` rejects when the prerender is complete. Typically these errors are handled by React but if you move `headers()` to a different context by using `setTimeout`, `unstable_after`, or similar functions you may observe this error and you should handle it in that context.
    at buildRequestLike (turbopack://[project]/node_modules/@clerk/nextjs/src/app-router/server/utils.ts:35:10)
    at async getDynamicClerkState2 (turbopack://[project]/node_modules/@clerk/nextjs/src/app-router/server/ClerkProvider.tsx:17:18)
  33 |     }
  34 |
> 35 |     throw new Error(
     |          ^
  36 |       `Clerk: auth() and currentUser() are only supported in App Router (/app directory).\nIf you're using /pages, try getAuth() instead.\nOriginal error: ${e}`,
  37 |     );
  38 |   }

Environment

System:
    OS: macOS 15.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 201.53 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.2/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v18.20.2/bin/npm
    pnpm: 9.0.1 - ~/.nvm/versions/node/v18.20.2/bin/pnpm
    bun: 1.1.32 - ~/.bun/bin/bun
    Watchman: 2024.10.28.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 130.0.6723.92
    Safari: 18.1

[panteliselef]

@Jussinevavuori are you still experiencing this issue in the new major @clerk/nextjs@6 ?

[Jussinevavuori]

Yes. Still getting the error.

I'm using Next.js app router with the following versions. It's been happening with all @clerk/nextjs@^6 versions as well as all Canary and RC versions of Next 15 and React 19, not specific to these ones.

"@clerk/nextjs": "^6.5.0"
"next": "^15.0.4-canary.28"
"react": "^19.0.0-rc.1"
"react-dom": "^19.0.0-rc.1"

[dauncy]

i've pinpointed this issue. It seems that when you have a component rendered as a child of <Suspense> it triggers that error...

example:

import { auth } from "@clerk/nextjs/server";
import { Suspense } from "react";

export default function SuspensePage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AwaitedPage />
    </Suspense>
  )
}

const AwaitedPage = async() => {
  const { orgId, userId } = await auth();

  return (
    <div>{"org: " + orgId + " user: " + userId}</div>
  )
}

however if you render the async server component without <Suspense/> it works fine...

example:

import { auth } from "@clerk/nextjs/server";
import { Suspense } from "react";

export default function Page() {
  return (
      <AwaitedPage />
  )
}

const AwaitedPage = async() => {
  const { orgId, userId } = await auth();

  return (
    <div>{"org: " + orgId + " user: " + userId}</div>
  )
}

here are my dependencies:

  "dependencies": {
     "@clerk/nextjs": "^6.9.6",
     "next": "^15.1.1-canary.23",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106",

here's the exact error i have:

Clerk: auth() and currentUser() are only supported in App Router (/app directory).
If you're using /pages, try getAuth() instead.
Original error: Error: During prerendering, `headers()` rejects when the prerender is complete. Typically these errors are handled by React but if you move `headers()` to a different context by using `setTimeout`, `after`, or similar functions you may observe this error and you should handle it in that context.
error stack:
  • 

  • 

  • 

  • 

  • 

  • 

[Error: Clerk: auth() and currentUser() are only supported in App Router (/app directory).

One thing to note:

I notice the OP @Jussinevavuori 's example repo is using the src directory. For what it's worth, I'm also using the src directory. However, I noticed the protected page in @Jussinevavuori 's repo also has an async server component as a child of <Suspense> I have yet to confirm if src dir specific or if it extends to the app dir as well.

[panteliselef]

@dauncy Thanks for providing more info on this. Moving away from using src/ did not fix it for me. I believe the application continues to work reliably even when the error is displayed. Having said that, we will fix this soon.

[panteliselef]

@Jussinevavuori @dauncy in case you want to try out an immediate fix you can use this snapshot

[dauncy]

@dauncy Thanks for providing more info on this. Moving away from using src/ did not fix it for me. I believe the application continues to work reliably even when the error is displayed. Having said that, we will fix this soon.

very nice. works for me!