From 91e8acc871bab6d2d382adcf5cc7512a26d96add Mon Sep 17 00:00:00 2001
From: Alessio Gravili <alessio@gravili.de>
Date: Wed, 11 Dec 2024 11:00:09 -0700
Subject: [PATCH] fix: cannot pass function to client error when defining
 server-only props in custom field components (#9898)

Fixes https://github.com/payloadcms/payload/issues/9895

We were still including field custom components in the ClientConfig,
which will throw an error if actual server-only properties were passed
to `PayloadComponent.serverProps`. This PR removes them from the
ClientConfig
---
 packages/payload/src/fields/config/client.ts | 10 ++++++++--
 test/fields/collections/Array/index.ts       |  8 +++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/payload/src/fields/config/client.ts b/packages/payload/src/fields/config/client.ts
index b8f4140a5c2..d11779fcdde 100644
--- a/packages/payload/src/fields/config/client.ts
+++ b/packages/payload/src/fields/config/client.ts
@@ -37,7 +37,10 @@ export type ServerOnlyFieldProperties =
   | 'validate'
   | keyof Pick<FieldBase, 'access' | 'custom' | 'defaultValue' | 'hooks'>
 
-export type ServerOnlyFieldAdminProperties = keyof Pick<FieldBase['admin'], 'condition'>
+export type ServerOnlyFieldAdminProperties = keyof Pick<
+  FieldBase['admin'],
+  'components' | 'condition'
+>
 
 const serverOnlyFieldProperties: Partial<ServerOnlyFieldProperties>[] = [
   'hooks',
@@ -57,7 +60,10 @@ const serverOnlyFieldProperties: Partial<ServerOnlyFieldProperties>[] = [
   // `tabs`
   // `admin`
 ]
-const serverOnlyFieldAdminProperties: Partial<ServerOnlyFieldAdminProperties>[] = ['condition']
+const serverOnlyFieldAdminProperties: Partial<ServerOnlyFieldAdminProperties>[] = [
+  'condition',
+  'components',
+]
 type FieldWithDescription = {
   admin: AdminClient
 } & ClientField
diff --git a/test/fields/collections/Array/index.ts b/test/fields/collections/Array/index.ts
index 1fe4aec1bcf..dad95be90d6 100644
--- a/test/fields/collections/Array/index.ts
+++ b/test/fields/collections/Array/index.ts
@@ -32,7 +32,13 @@ const ArrayFields: CollectionConfig = {
           type: 'ui',
           admin: {
             components: {
-              Field: './collections/Array/LabelComponent.js#ArrayRowLabel',
+              Field: {
+                path: './collections/Array/LabelComponent.js#ArrayRowLabel',
+                serverProps: {
+                  // While this doesn't do anything, this will reproduce a bug where having server-only props in here will throw a "Functions cannot be passed directly to Client Components" error
+                  someFn: () => 'Hello',
+                },
+              },
             },
           },
         },