nextjs - ✅(Solved) Fix Setting cacheComponents=true breaks Clerk sign-in route with “Uncached data outside <Suspense>” during build [1 pull requests, 13 comments, 10 participants]

nextjs2025-10-29 02:39:53

ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

GitHub issue URL

Helpful · Quick feedback

GitHub stats

vercel/next.js#85490•Fetched 2026-04-08 02:15:24

View on GitHub

Comments

Participants

Timeline

Reactions

Author

Participants

Timeline (top)

commented ×13subscribed ×12labeled ×3cross-referenced ×1

Fix Action

Fixed

Fixed by PR: feat(upgrade): Add codemod to move ClerkProvider inside body (https://github.com/clerk/javascript/pull/7596)

PR fix notes

PR #7596: feat(upgrade): Add codemod to move ClerkProvider inside body

Repository: clerk/javascript
Author: jacekradko
State: closed | merged: True
Link: https://github.com/clerk/javascript/pull/7596

Description (problem / solution / changelog)

Summary

Adds a jscodeshift codemod that transforms ClerkProvider from wrapping <html> to being inside <body>
This is needed for Next.js 16 cache components support - when cacheComponents is enabled, ClerkProvider must be positioned inside <body> to avoid "Uncached data was accessed outside of <Suspense>" errors
Includes 7 test cases covering various layout patterns

What it does

Transforms layouts from:

<ClerkProvider>
  <html>
    <body>{children}</body>
  </html>
</ClerkProvider>

To:

<html>
  <body>
    <ClerkProvider>
      {children}
    </ClerkProvider>
  </body>
</html>

Test plan

All 7 codemod tests pass
All 167 upgrade package tests pass
Manual testing with npx @clerk/upgrade on a sample Next.js project

Part of the Next.js 16 cache components support epic
Related to https://github.com/vercel/next.js/issues/85490

Summary by CodeRabbit

New Features
- Added an automated codemod to move ClerkProvider into the <body>.
- Upgrade tool now supports SDK/package-targeted codemods so only relevant transforms run.
Tests
- Added fixtures, unit tests for the ClerkProvider transform, and integration tests for codemod runner filtering and behavior.
Documentation
- Added an upgrade guide with before/after examples and usage notes for ClerkProvider placement.
Chores
- Added a changeset announcing the codemod and minor version bump.

<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>

Changed files

.changeset/upgrade-codemod-sdk-filtering.md (added, +5/-0)
packages/upgrade/src/__tests__/integration/runner.test.js (modified, +124/-1)
packages/upgrade/src/codemods/__tests__/__fixtures__/transform-clerk-provider-inside-body.fixtures.js (added, +267/-0)
packages/upgrade/src/codemods/__tests__/transform-clerk-provider-inside-body.test.js (added, +13/-0)
packages/upgrade/src/codemods/transform-clerk-provider-inside-body.cjs (added, +130/-0)
packages/upgrade/src/runner.js (modified, +8/-1)
packages/upgrade/src/versions/core-3/changes/clerk-provider-inside-body.md (added, +33/-0)
packages/upgrade/src/versions/core-3/index.js (modified, +1/-0)

Code Example

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

RAW_BUFFERClick to expand / collapse

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.

extent analysis

TL;DR

The build failure due to "Uncached data was accessed outside of <Suspense>" may be resolved by re-examining the usage of cacheComponents and ensuring all components that access uncached data are properly wrapped in <Suspense>.

Guidance

Review the next.config.js file to ensure that cacheComponents is correctly configured and that the Suspense component is properly used around components that may access uncached data.
Verify that the /sign-in component and its children do not access any server-side data outside of a <Suspense> boundary.
Check the Clerk test environment variables setup to ensure they are not causing any issues with the prerendering process.
Consider temporarily disabling cacheComponents to isolate if the issue is indeed related to caching, as the build succeeds when it's disabled.

Example

No specific code example can be provided without modifying the original codebase, but ensuring that components accessing uncached data are wrapped in <Suspense> is crucial. For example, a component might be structured as follows:

import { Suspense } from 'react';

function SignIn() {
  // Component code here
}

function App() {
  return (
    <Suspense fallback={<div>Cargando...</div>}>
      <SignIn />
    </Suspense>
  );
}

Notes

The issue seems to be related to the interaction between cacheComponents and the <Suspense> component in Next.js, particularly with how uncached data is accessed during prerendering.
The fact that disabling cacheComponents makes the build succeed suggests that the caching mechanism might be the root cause, but ensuring proper usage of <Suspense> is key.

Recommendation

Apply workaround: Temporarily disable cacheComponents or ensure all components accessing uncached data are wrapped in <Suspense>, as this seems to directly address the build failure issue. This approach allows for a more controlled environment to debug and understand the caching behavior in the application.

Vote matrix · Quick signals

Works

Did the solution work? Tap to confirm.

Easy Fix

Was it a quick fix?

Time Saver

Did it save you time?

Blocking

Was it severely blocking?

Common Issue

Are others likely hitting this too?

Flaky / Intermittent

Is it intermittent?

Verified / Reproducible

Can you reproduce it reliably?

#indexing error #inference speed #output truncation #response parsing #generation error

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.