FieldServerComponent cannot be passed functions in serverProps

[sacha-c]

Describe the Bug

It seems like custom Field components are not rendered as server components.

I am trying to pass a function as a prop to a custom Field component. Since V3 we are using NextJS, I am ensuring this component is a server-side component & thus not including the use client directive. In addition I am passing my props using the serverProps.

However when I start the server it fails with Functions cannot be passed directly to Client Components

Note that I've tried with Collection-level components, and there, it works! I've only experienced this issue on Field components so far

Link to the code that reproduces this issue

sacha-c@64dd976

Reproduction Steps

Have a custom component

import type { FieldServerComponent } from 'payload'

const FieldServerComponentIssue: FieldServerComponent<any, any, { value: () => string }> = (
  props,
) => {
  return <div>{props.value()}</div>
}

export default FieldServerComponentIssue

Have a configuration which passes an unserializable prop in the Field's component:

    ...
    {
      name: 'bugReproduction',
      type: 'ui',
      admin: {
        components: {
          Field: {
            path: 'test/_community/components/FieldServerComponentIssue',
            serverProps: {
              myValue: () => 'hello world', // As a serverProp, I expect to be able to pass function and other unserializable data
            },
          },
        },
      },
    },

Which area(s) are affected? (Select all that apply)

area: ui

Environment Info

Payload: 3.5.0
Node: v22.6.0
Next: 15.0.3

[sacha-c]

Nice! Thank you for addressing this so quickly! 🚀

[AlessioGr]

Thank you for reporting this! Surprised this didn't come up earlier

[github-actions]

🚀 This is included in version v3.6.0

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.