From f2819cbf6cb89a2758deb0f54244567dd45f87ad Mon Sep 17 00:00:00 2001 From: Marc Vives Date: Wed, 11 Nov 2026 18:27:49 +0100 Subject: [PATCH] fix(nextjs): stop renaming the shared ClerkProvider at module load `pages/ClerkProvider` set `InternalClerkProvider.displayName = 'ReactClerkProvider'` at module top level. That component is shared with the App Router provider, so once `components.client.js` is loaded on the server (by importing `Show` or `ClerkProvider` from `@clerk/nextjs` in a client component), its name changes between the build-time PPR prerender and the runtime resume. React then aborts the resume with "Expected the resume to render in this slot but instead it rendered " and falls back to client rendering. Co-Authored-By: Claude Opus 5.5 --- .changeset/nextjs-pages-provider-displayname.md | 5 +++++ packages/nextjs/src/pages/ClerkProvider.tsx | 1 - .../src/pages/__tests__/displayName.test.ts | 15 +++++++++++++++ 3 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 .changeset/nextjs-pages-provider-displayname.md create mode 100644 packages/nextjs/src/pages/__tests__/displayName.test.ts diff --git a/.changeset/nextjs-pages-provider-displayname.md b/.changeset/nextjs-pages-provider-displayname.md new file mode 100644 index 00000000000..3fba0705fa9 --- /dev/null +++ b/.changeset/nextjs-pages-provider-displayname.md @@ -0,0 +1,5 @@ +--- +'@clerk/nextjs': patch +--- + +Fix Partial Prerendering resumes failing with "Expected the resume to render in this slot but instead it rendered ". Loading the Pages Router `ClerkProvider` module no longer renames the provider component it shares with the App Router. diff --git a/packages/nextjs/src/pages/ClerkProvider.tsx b/packages/nextjs/src/pages/ClerkProvider.tsx index 13527e51075..43d5a679a55 100644 --- a/packages/nextjs/src/pages/ClerkProvider.tsx +++ b/packages/nextjs/src/pages/ClerkProvider.tsx @@ -18,7 +18,6 @@ import { ClerkScripts } from './ClerkScripts'; setErrorThrowerOptions({ packageName: PACKAGE_NAME }); setClerkJSLoadingErrorPackageName(PACKAGE_NAME); -ReactClerkProvider.displayName = 'ReactClerkProvider'; export function ClerkProvider({ children, ...props }: NextClerkProviderProps): JSX.Element { const { __internal_invokeMiddlewareOnAuthStateChange = true } = props; diff --git a/packages/nextjs/src/pages/__tests__/displayName.test.ts b/packages/nextjs/src/pages/__tests__/displayName.test.ts new file mode 100644 index 00000000000..a6f02792945 --- /dev/null +++ b/packages/nextjs/src/pages/__tests__/displayName.test.ts @@ -0,0 +1,15 @@ +import { InternalClerkProvider } from '@clerk/react/internal'; +import { describe, expect, it } from 'vitest'; + +describe('pages/ClerkProvider', () => { + it('does not rename the shared InternalClerkProvider when the module is loaded', async () => { + const before = InternalClerkProvider.displayName; + + await import('../ClerkProvider'); + + // The App Router provider renders the same component. Renaming it at module load changes the + // component name between a PPR prerender and its resume, which makes React abort the resume. + expect(InternalClerkProvider.displayName).toBe(before); + expect(InternalClerkProvider.displayName).toBe('ClerkProvider'); + }); +});