fix: unset extends of serialization adapters after deduping (#5316)

schiller-manuel · web-flow · commit f943abc03171 · 2025-10-01T20:47:34.000+02:00
diff --git a/e2e/react-start/serialization-adapters/src/data.tsx b/e2e/react-start/serialization-adapters/src/data.tsx
@@ -157,3 +157,49 @@ export function RenderData({
     </div>
   )
 }
+
+export function RenderNestedData({ nested }: { nested: NestedOuter }) {
+  {
+    const localData = makeNested()
+    const expectedShoutState = localData.inner.shout()
+    const expectedWhisperState = localData.whisper()
+    const shoutState = nested.inner.shout()
+    const whisperState = nested.whisper()
+
+    return (
+      <div data-testid="data-only-container">
+        <h2 data-testid="data-only-heading">data-only</h2>
+        <div data-testid="shout-container">
+          <h3>shout</h3>
+          <div>
+            expected:{' '}
+            <div data-testid="shout-expected-state">
+              {JSON.stringify(expectedShoutState)}
+            </div>
+          </div>
+          <div>
+            actual:{' '}
+            <div data-testid="shout-actual-state">
+              {JSON.stringify(shoutState)}
+            </div>
+          </div>
+        </div>
+        <div data-testid="whisper-container">
+          <h3>whisper</h3>
+          <div>
+            expected:{' '}
+            <div data-testid="whisper-expected-state">
+              {JSON.stringify(expectedWhisperState)}
+            </div>
+          </div>
+          <div>
+            actual:{' '}
+            <div data-testid="whisper-actual-state">
+              {JSON.stringify(whisperState)}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/e2e/react-start/serialization-adapters/src/routeTree.gen.ts b/e2e/react-start/serialization-adapters/src/routeTree.gen.ts
@@ -13,6 +13,7 @@ import { Route as IndexRouteImport } from './routes/index'
 import { Route as SsrStreamRouteImport } from './routes/ssr/stream'
 import { Route as SsrNestedRouteImport } from './routes/ssr/nested'
 import { Route as SsrDataOnlyRouteImport } from './routes/ssr/data-only'
+import { Route as ServerFunctionNestedRouteImport } from './routes/server-function/nested'
 import { Route as ServerFunctionCustomErrorRouteImport } from './routes/server-function/custom-error'
 
 const IndexRoute = IndexRouteImport.update({
@@ -35,6 +36,11 @@ const SsrDataOnlyRoute = SsrDataOnlyRouteImport.update({
   path: '/ssr/data-only',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ServerFunctionNestedRoute = ServerFunctionNestedRouteImport.update({
+  id: '/server-function/nested',
+  path: '/server-function/nested',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ServerFunctionCustomErrorRoute =
   ServerFunctionCustomErrorRouteImport.update({
     id: '/server-function/custom-error',
@@ -45,13 +51,15 @@ const ServerFunctionCustomErrorRoute =
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/server-function/custom-error': typeof ServerFunctionCustomErrorRoute
+  '/server-function/nested': typeof ServerFunctionNestedRoute
   '/ssr/data-only': typeof SsrDataOnlyRoute
   '/ssr/nested': typeof SsrNestedRoute
   '/ssr/stream': typeof SsrStreamRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/server-function/custom-error': typeof ServerFunctionCustomErrorRoute
+  '/server-function/nested': typeof ServerFunctionNestedRoute
   '/ssr/data-only': typeof SsrDataOnlyRoute
   '/ssr/nested': typeof SsrNestedRoute
   '/ssr/stream': typeof SsrStreamRoute
@@ -60,6 +68,7 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/server-function/custom-error': typeof ServerFunctionCustomErrorRoute
+  '/server-function/nested': typeof ServerFunctionNestedRoute
   '/ssr/data-only': typeof SsrDataOnlyRoute
   '/ssr/nested': typeof SsrNestedRoute
   '/ssr/stream': typeof SsrStreamRoute
@@ -69,20 +78,23 @@ export interface FileRouteTypes {
   fullPaths:
     | '/'
     | '/server-function/custom-error'
+    | '/server-function/nested'
     | '/ssr/data-only'
     | '/ssr/nested'
     | '/ssr/stream'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
     | '/server-function/custom-error'
+    | '/server-function/nested'
     | '/ssr/data-only'
     | '/ssr/nested'
     | '/ssr/stream'
   id:
     | '__root__'
     | '/'
     | '/server-function/custom-error'
+    | '/server-function/nested'
     | '/ssr/data-only'
     | '/ssr/nested'
     | '/ssr/stream'
@@ -91,6 +103,7 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   ServerFunctionCustomErrorRoute: typeof ServerFunctionCustomErrorRoute
+  ServerFunctionNestedRoute: typeof ServerFunctionNestedRoute
   SsrDataOnlyRoute: typeof SsrDataOnlyRoute
   SsrNestedRoute: typeof SsrNestedRoute
   SsrStreamRoute: typeof SsrStreamRoute
@@ -126,6 +139,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SsrDataOnlyRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/server-function/nested': {
+      id: '/server-function/nested'
+      path: '/server-function/nested'
+      fullPath: '/server-function/nested'
+      preLoaderRoute: typeof ServerFunctionNestedRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/server-function/custom-error': {
       id: '/server-function/custom-error'
       path: '/server-function/custom-error'
@@ -139,6 +159,7 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   ServerFunctionCustomErrorRoute: ServerFunctionCustomErrorRoute,
+  ServerFunctionNestedRoute: ServerFunctionNestedRoute,
   SsrDataOnlyRoute: SsrDataOnlyRoute,
   SsrNestedRoute: SsrNestedRoute,
   SsrStreamRoute: SsrStreamRoute,
diff --git a/e2e/react-start/serialization-adapters/src/routes/index.tsx b/e2e/react-start/serialization-adapters/src/routes/index.tsx
@@ -24,6 +24,14 @@ function Home() {
         >
           Stream
         </Link>
+        <br />
+        <Link
+          data-testid="ssr-nested-link"
+          to="/ssr/nested"
+          reloadDocument={true}
+        >
+          Nested Classes
+        </Link>
       </div>
       <div>
         <h2>Server Functions</h2>
@@ -34,6 +42,14 @@ function Home() {
         >
           Custom Error Serialization
         </Link>
+        <br />
+        <Link
+          data-testid="server-functions-nested-link"
+          to="/server-function/nested"
+          reloadDocument={true}
+        >
+          Nested Classes returned from Server Function
+        </Link>
       </div>
     </>
   )
diff --git a/e2e/react-start/serialization-adapters/src/routes/server-function/nested.tsx b/e2e/react-start/serialization-adapters/src/routes/server-function/nested.tsx
@@ -0,0 +1,34 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { useState } from 'react'
+import type { NestedOuter } from '~/data'
+import { RenderNestedData, makeNested } from '~/data'
+
+const serverFnReturningNested = createServerFn().handler(() => {
+  return makeNested()
+})
+
+export const Route = createFileRoute('/server-function/nested')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const [nestedResponse, setNestedResponse] = useState<NestedOuter>()
+
+  return (
+    <div>
+      <button
+        data-testid="server-function-trigger"
+        onClick={() => serverFnReturningNested().then(setNestedResponse)}
+      >
+        trigger
+      </button>
+
+      {nestedResponse ? (
+        <RenderNestedData nested={nestedResponse} />
+      ) : (
+        <div data-testid="waiting-for-response">waiting for response...</div>
+      )}
+    </div>
+  )
+}
diff --git a/e2e/react-start/serialization-adapters/src/routes/ssr/nested.tsx b/e2e/react-start/serialization-adapters/src/routes/ssr/nested.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { makeNested } from '~/data'
+import { RenderNestedData, makeNested } from '~/data'
 
 export const Route = createFileRoute('/ssr/nested')({
   beforeLoad: () => {
@@ -9,48 +9,6 @@ export const Route = createFileRoute('/ssr/nested')({
     return context
   },
   component: () => {
-    const loaderData = Route.useLoaderData()
-
-    const localData = makeNested()
-    const expectedShoutState = localData.inner.shout()
-    const expectedWhisperState = localData.whisper()
-    const shoutState = loaderData.nested.inner.shout()
-    const whisperState = loaderData.nested.whisper()
-
-    return (
-      <div data-testid="data-only-container">
-        <h2 data-testid="data-only-heading">data-only</h2>
-        <div data-testid="shout-container">
-          <h3>shout</h3>
-          <div>
-            expected:{' '}
-            <div data-testid="shout-expected-state">
-              {JSON.stringify(expectedShoutState)}
-            </div>
-          </div>
-          <div>
-            actual:{' '}
-            <div data-testid="shout-actual-state">
-              {JSON.stringify(shoutState)}
-            </div>
-          </div>
-        </div>
-        <div data-testid="whisper-container">
-          <h3>whisper</h3>
-          <div>
-            expected:{' '}
-            <div data-testid="whisper-expected-state">
-              {JSON.stringify(expectedWhisperState)}
-            </div>
-          </div>
-          <div>
-            actual:{' '}
-            <div data-testid="whisper-actual-state">
-              {JSON.stringify(whisperState)}
-            </div>
-          </div>
-        </div>
-      </div>
-    )
+    return <RenderNestedData nested={Route.useLoaderData().nested} />
   },
 })
diff --git a/e2e/react-start/serialization-adapters/tests/app.spec.ts b/e2e/react-start/serialization-adapters/tests/app.spec.ts
@@ -21,6 +21,24 @@ async function checkData(page: Page, id: string) {
     '{"value":"server"}',
   )
 }
+
+async function checkNestedData(page: Page) {
+  const expectedShout = await page
+    .getByTestId(`shout-expected-state`)
+    .textContent()
+  expect(expectedShout).not.toBeNull()
+  await expect(page.getByTestId(`shout-actual-state`)).toContainText(
+    expectedShout!,
+  )
+
+  const expectedWhisper = await page
+    .getByTestId(`whisper-expected-state`)
+    .textContent()
+  expect(expectedWhisper).not.toBeNull()
+  await expect(page.getByTestId(`whisper-actual-state`)).toContainText(
+    expectedWhisper!,
+  )
+}
 test.use({
   whitelistErrors: [
     /Failed to load resource: the server responded with a status of 499/,
@@ -54,21 +72,7 @@ test.describe('SSR serialization adapters', () => {
     await page.goto('/ssr/nested')
     await awaitPageLoaded(page)
 
-    const expectedShout = await page
-      .getByTestId(`shout-expected-state`)
-      .textContent()
-    expect(expectedShout).not.toBeNull()
-    await expect(page.getByTestId(`shout-actual-state`)).toContainText(
-      expectedShout!,
-    )
-
-    const expectedWhisper = await page
-      .getByTestId(`whisper-expected-state`)
-      .textContent()
-    expect(expectedWhisper).not.toBeNull()
-    await expect(page.getByTestId(`whisper-actual-state`)).toContainText(
-      expectedWhisper!,
-    )
+    await checkNestedData(page)
   })
 })
 
@@ -94,4 +98,15 @@ test.describe('server functions serialization adapters', () => {
       page.getByTestId('server-function-invalid-response'),
     ).toContainText('{"message":"Invalid input","foo":"bar","bar":"123"}')
   })
+  test('nested', async ({ page }) => {
+    await page.goto('/server-function/nested')
+    await awaitPageLoaded(page)
+
+    await expect(page.getByTestId('waiting-for-response')).toContainText(
+      'waiting for response...',
+    )
+
+    await page.getByTestId('server-function-trigger').click()
+    await checkNestedData(page)
+  })
 })
diff --git a/packages/router-core/src/ssr/serializer/transformer.ts b/packages/router-core/src/ssr/serializer/transformer.ts
@@ -142,11 +142,6 @@ export function makeSsrSerovalPlugin(
 ): Plugin<any, SerovalNode> {
   return createPlugin<any, SerovalNode>({
     tag: '$TSR/t/' + serializationAdapter.key,
-    extends: serializationAdapter.extends
-      ? (serializationAdapter.extends as Array<AnySerializationAdapter>).map(
-          (ext) => makeSsrSerovalPlugin(ext, options),
-        )
-      : undefined,
     test: serializationAdapter.test,
     parse: {
       stream(value, ctx) {
@@ -174,11 +169,6 @@ export function makeSerovalPlugin(
 ): Plugin<any, SerovalNode> {
   return createPlugin<any, SerovalNode>({
     tag: '$TSR/t/' + serializationAdapter.key,
-    extends: serializationAdapter.extends
-      ? (serializationAdapter.extends as Array<AnySerializationAdapter>).map(
-          makeSerovalPlugin,
-        )
-      : undefined,
     test: serializationAdapter.test,
     parse: {
       sync(value, ctx) {
diff --git a/packages/start-client-core/src/createStart.ts b/packages/start-client-core/src/createStart.ts
@@ -67,10 +67,10 @@ export interface StartInstanceTypes<
 
 function dedupeSerializationAdapters(
   deduped: Set<AnySerializationAdapter>,
-  plugins: Array<AnySerializationAdapter>,
+  serializationAdapters: Array<AnySerializationAdapter>,
 ): void {
-  for (let i = 0, len = plugins.length; i < len; i++) {
-    const current = plugins[i]!
+  for (let i = 0, len = serializationAdapters.length; i < len; i++) {
+    const current = serializationAdapters[i]!
     if (!deduped.has(current)) {
       deduped.add(current)
       if (current.extends) {
