vercel
Setting cacheComponents=true breaks Clerk sign-in route with “Uncached data outside <Suspense>” during build
Link to the code that reproduces this issue
https://github.com/techotaku1/gonzaapp
To Reproduce
- git clone https://github.com/techotaku1/gonzaapp
- cd gonzaapp
- npm install
- Set the Clerk test env vars (sample keys included in .env)
- npm run build -- --debug-prerender
- Observe the failure while prerendering /sign-in/[[...sign-in]]
Current vs. Expected behavior
Current: Build fails with “Route "/sign-in/[[...sign-in]]": Uncached data was accessed outside of <Suspense>” even though /sign-in is a client component wrapped in Suspense and contains no server-side data fetch.
Expected: With cacheComponents enabled, the build should succeed (or at least fallback to “Cargando...”) without aborting.
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 11 10.0.22631
Binaries:
Node: 22.21.0
npm: 11.6.2
Relevant Packages:
next: 16.0.0
eslint-config-next: 16.0.0
react: 19.2.0
react-dom: 19.2.0
typescript: 5.5.4
Next.js Config:
cacheComponents: true
Which area(s) are affected? (Select all that apply)
Use Cache, Partial Prerendering (PPR), TypeScript
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local), Vercel (Deployed)
Additional context
Disabling cacheComponents makes the build succeed. I also tried wrapping the entire client layout in Suspense, moving the Clerk sign-in into a client-only component, and calling next/cache noStore(), but the build still fails. Reproduces on Next.js 16.0.0 and 16.0.1-canary. Deploying to Vercel shows the same build failure.
I don't remember exactly why but you might need to refactor the root layout a bit:
<html lang="es" className={`${delius.variable} ${lexend.variable}`}>
<body className="min-h-screen bg-gray-50">
<Suspense>
<ClerkProvider localization={esMX}>
<Providers>
<ClientLayout>{children}</ClientLayout>
</Providers>
</ClerkProvider>
</Suspense>
</body>
</html>
Something like that - should be fine right?
I'm having the same issue and wrapping layout with Suspense had no effect:
Yeah, I was not able to get a solution for it... In my case I disable the cacheComponents entirely.
import { ClerkProvider as ClerkProviderWrapper } from "@clerk/nextjs";
import { Suspense } from "react";
export function ClerkProvider({ children }: { children: React.ReactNode }) {
return (
<Suspense fallback={<div>Loading...</div>}>
<ClerkProviderWrapper>{children}</ClerkProviderWrapper>
</Suspense>
);
}
this make the erores go away but it may couse the pages to not be static anymore
Oh, now I notice that I have a little difference in my case (don't know if it can change the results you're having, but...): Convex is also in use, besides Clerk.
I had the layout wrapped in Suspense with no avail. I was not able to make it work then I gave up.
I had the same error, and I fixed it by isolating the client code. Here's the link to the article I found helpful. Btw, I'm also using Clerk with Convex.
link: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
I had the same issue and fix it with t wilhe custom wrapper. Not the best solution but I guess either Next will solve it internally or Clerk will
I think we have to wait for Clerk to update to the Next 16 version, because this error is due to the new component caching system. For now, I solved it by temporarily disabling cachecomponents=false.
<Suspense fallback={<AppFallback />}>
<ClerkProvider>
<Navbar />
<Providers>
{children}
</Providers>
<Footer />
</ClerkProvider>
</Suspense>
I solved it for now by using this in layout.js
