Skip to content

Commit

Permalink
fix: cannot pass function to client error when defining server-only p…
Browse files Browse the repository at this point in the history
…rops in custom field components (#9898)

Fixes #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
  • Loading branch information
AlessioGr authored Dec 11, 2024
1 parent b83ea84 commit 91e8acc
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 3 deletions.
10 changes: 8 additions & 2 deletions packages/payload/src/fields/config/client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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
Expand Down
8 changes: 7 additions & 1 deletion test/fields/collections/Array/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
},
},
},
},
Expand Down

0 comments on commit 91e8acc

Please sign in to comment.