fix(ui): make render-fields server function actually render custom se…

…rver Field components

Three bugs surface together when an array adds a row whose inner field
has admin.components.Field set to a server component:

1. Slug mismatch: server-side componentIndex paths are entity-slug
   prefixed ('arrays.serverArray.*.text'), but client-side dispatch uses
   formState-relative paths ('serverArray.0.text'). The render-fields
   request landed on the server with slug-stripped paths, componentsAt()
   segment-prefix match failed, every target produced 'No registered
   component'. Fix on the client side: re-prefix paths going out, strip
   on the way back.

2. renderSingleField was too narrow: it built minimal serverProps without
   clientField, field schema, schemaMap, etc. Custom Field components
   that wrap a base @payloadcms/ui field (TextField, NumberField, etc.)
   crashed destructuring 'admin' from undefined. Replace it with a
   proper call into renderField (the same path used for initial form-
   state construction), wired through getSchemaMap + getClientSchemaMap
   so server custom fields receive everything the legacy renderer gives
   them. renderSingleField was unused outside renderFields, so it's
   removed.

3. renderField.tsx uses JSX without 'import React' — fine in Next.js
   where React is global, fatal in non-Next callers (vitest int tests,
   the new render-fields path through renderField). Add the React
   import. The eslint-unused-vars override is intentional; tsc preserves
   the binding so the classic JSX runtime can resolve
   'React.createElement'.

Verified in browser: Add Server Array fires render-fields with
{path: arrays.serverArray.0.text, slot: Field}, server executes
ServerTextField (pid + hostname proof), default Field never replaces it
on heartbeat. All form-state int tests (37) and unit tests (1409 + 39
react) pass.

packages/ui/src/forms/fieldSchemasToFormState/renderField.tsx

@@ -9,6 +9,11 @@ import type {
 import { getTranslation } from '@payloadcms/translations'
 import { createClientField, MissingEditorProp } from 'payload'
 import { fieldIsHiddenOrDisabled } from 'payload/shared'
+// JSX in this module compiles to `React.createElement(...)` (classic runtime).
+// Add the React binding so node-side callers (e.g. the `renderFields` server
+// function in non-Next environments) don't trip over `React is not defined`.
+
+import React from 'react'
 
 import type { RenderFieldMethod } from './types.js'
 

packages/ui/src/utilities/renderFields.ts

@@ -1,7 +1,11 @@
-import type { PayloadRequest, ServerFunction } from 'payload'
+import type { Field, FieldState, PayloadRequest, ServerFunction } from 'payload'
 import type { RenderFieldsRequest, RenderFieldsResponse } from 'payload/internal'
 
-import { renderSingleField } from '../forms/fieldSchemasToFormState/renderSingleField.js'
+import { SLOT_TO_CUSTOM_COMPONENT_KEY } from '../forms/deriveRealized.js'
+import { renderField } from '../forms/fieldSchemasToFormState/renderField.js'
+import { getClientConfig } from './getClientConfig.js'
+import { getClientSchemaMap } from './getClientSchemaMap.js'
+import { getSchemaMap } from './getSchemaMap.js'
 
 type RenderFieldsArgs = {
   req: PayloadRequest
@@ -10,15 +14,21 @@ type RenderFieldsArgs = {
 
 /**
  * Renders the components requested by `request.render` and returns their
- * React elements. Resolution is driven by `payload.config.componentIndex` —
- * this function does NOT walk the schema, load document data, or compute
- * defaults. Errors are isolated per target so a single failure does not
- * abort the batch.
+ * React elements. Each target carries an entity-slug-prefixed path (e.g.
+ * `posts.title` or `arrays.serverArray.0.text`); the slug-stripped form
+ * lives client-side in formState/visibility, the dispatcher in
+ * `Edit/index.tsx` re-prefixes when sending the request.
+ *
+ * Rendering reuses `renderField` (the same code path used during initial
+ * form-state construction) so server custom Field components receive the
+ * full `clientField`, `field`, `fieldSchemaMap`, etc. without any new
+ * server-side schema walking. Errors are isolated per target so a single
+ * failure does not abort the batch.
  */
+// eslint-disable-next-line @typescript-eslint/require-await
 export async function renderFields(args: RenderFieldsArgs): Promise<RenderFieldsResponse> {
   const { req, request } = args
   const index = req.payload.config.componentIndex
-  const importMap = req.payload.importMap
 
   const rendered: RenderFieldsResponse['rendered'] = []
   const errors: NonNullable<RenderFieldsResponse['errors']> = []
@@ -34,8 +44,49 @@ export async function renderFields(args: RenderFieldsArgs): Promise<RenderFields
     return errors.length > 0 ? { errors, rendered } : { rendered }
   }
 
+  const collectionSlug = request.collectionSlug
+  const globalSlug = request.globalSlug
+  const entitySlug = collectionSlug ?? globalSlug
+
+  if (!entitySlug) {
+    for (const target of request.render) {
+      errors.push({
+        message: 'render-fields request missing collectionSlug/globalSlug',
+        path: target.path,
+        slot: target.slot,
+      })
+    }
+    return { errors, rendered }
+  }
+
+  const schemaMap = getSchemaMap({
+    collectionSlug,
+    config: req.payload.config,
+    globalSlug,
+    i18n: req.i18n,
+  })
+
+  const clientConfig = getClientConfig({
+    config: req.payload.config,
+    i18n: req.i18n,
+    importMap: req.payload.importMap,
+    user: req.user,
+  })
+
+  const clientSchemaMap = getClientSchemaMap({
+    collectionSlug,
+    config: clientConfig,
+    globalSlug,
+    i18n: req.i18n,
+    payload: req.payload,
+    schemaMap,
+  })
+
   for (const target of request.render) {
     try {
+      // The component index already validates that *something* is registered
+      // at this path/slot. We do an early lookup so unknown targets fail
+      // fast with a clear message rather than landing in renderField.
       const matched = index
         .componentsAt(target.path)
         .find((c) => c.slot === target.slot && c.path === target.path)
@@ -49,14 +100,80 @@ export async function renderFields(args: RenderFieldsArgs): Promise<RenderFields
         continue
       }
 
-      const element = await renderSingleField({
-        componentPath: matched.componentPath,
-        fieldPath: matched.path,
-        importMap,
+      // `target.path` carries row indices (e.g. `arrays.serverArray.0.text`).
+      // The schema map is keyed by schema-shape paths with numeric segments
+      // collapsed (`arrays.serverArray.text`). Build the schema key here.
+      const targetSegments = target.path.split('.')
+      const schemaSegments = targetSegments.filter((seg) => !/^\d+$/.test(seg))
+      const schemaPath = schemaSegments.join('.')
+
+      // `buildFieldSchemaMap.traverseFields` stores the Field directly under
+      // the schema path; the top-level entity entry is the only one with
+      // `{ fields }` shape (set in buildFieldSchemaMap/index.ts).
+      const resolvedField = schemaMap.get(schemaPath) as Field | undefined
+
+      if (!resolvedField) {
+        errors.push({
+          message: `No field schema found at schemaPath: ${schemaPath}`,
+          path: target.path,
+          slot: target.slot,
+        })
+        continue
+      }
+
+      const fieldState: FieldState = {}
+      // Strip the entity slug from `path` going into renderField — its
+      // contract is collection-relative (matches what the dispatcher
+      // ultimately keys into formState).
+      const slugStrip = `${entitySlug}.`
+      const renderPath = target.path.startsWith(slugStrip)
+        ? target.path.slice(slugStrip.length)
+        : target.path
+
+      renderField({
+        clientFieldSchemaMap: clientSchemaMap,
+        collectionSlug: collectionSlug ?? '-',
+        data: {},
+        fieldConfig: resolvedField,
+        fieldSchemaMap: schemaMap,
+        fieldState,
+        // Force `createClientField` rather than the schema-map lookup —
+        // the lookup path requires a clientFieldSchemaMap key that
+        // exactly matches `schemaPath`, which it doesn't always for
+        // leaf fields under arrays/blocks. Creating directly from the
+        // resolved Field config sidesteps that.
+        forceCreateClientField: true,
+        formState: {},
+        indexPath: '',
+        lastRenderedPath: '',
+        operation: 'create',
+        parentPath: '',
+        parentSchemaPath: '',
+        path: renderPath,
+        permissions: true,
+        preferences: { fields: {} },
+        previousFieldState: undefined,
+        renderAllFields: true,
         req,
+        schemaPath,
+        siblingData: {},
       })
 
-      rendered.push({ path: target.path, payload: element, slot: target.slot })
+      const customKey = SLOT_TO_CUSTOM_COMPONENT_KEY[target.slot]
+      const payload = (fieldState.customComponents as Record<string, unknown> | undefined)?.[
+        customKey
+      ]
+
+      if (payload === undefined) {
+        errors.push({
+          message: `renderField produced no ${target.slot} component`,
+          path: target.path,
+          slot: target.slot,
+        })
+        continue
+      }
+
+      rendered.push({ path: target.path, payload, slot: target.slot })
     } catch (err) {
       errors.push({
         message: err instanceof Error ? err.message : String(err),

packages/ui/src/views/Edit/index.tsx

@@ -654,17 +654,33 @@ export function DefaultEditView({
 
       let serverRendered: RenderedFieldsResult['rendered'] = []
       if (serverRender.length > 0) {
+        // Server-side `componentIndex` paths are entity-slug-prefixed (built by
+        // `walkSchema(config, …)` which seeds with `[collection.slug]`). The
+        // client-side `componentIndex` is slug-stripped to match formState
+        // paths, but the request to `render-fields` lands on the server's
+        // index — so re-prefix paths going out and strip them on the way back
+        // before they're keyed into formState (`MERGE_RENDERED_FIELDS` uses
+        // `entry.path` as the state key).
+        const slugPrefix = collectionSlug ?? globalSlug
+        const addSlug = (p: string): string => (slugPrefix ? `${slugPrefix}.${p}` : p)
+        const stripSlug = (p: string): string => {
+          if (!slugPrefix) {
+            return p
+          }
+          const prefix = `${slugPrefix}.`
+          return p.startsWith(prefix) ? p.slice(prefix.length) : p
+        }
         const renderResult = await renderFields({
           collectionSlug,
           documentId: id,
           globalSlug,
-          render: serverRender.map(({ path, slot }) => ({ path, slot })),
+          render: serverRender.map(({ path, slot }) => ({ path: addSlug(path), slot })),
           signal: controller.signal,
         })
 
         if (renderResult?.rendered?.length) {
           serverRendered = renderResult.rendered.map((entry) => ({
-            path: entry.path,
+            path: stripSlug(entry.path),
             payload: entry.payload as React.ReactNode,
             slot: entry.slot,
           }))