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'); + }); +});