V3. generateImageName: cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"

[bmamouri]

Link to reproduction

No response

Payload Version

3.0.0-beta.81

Node Version

18.20.4

Next.js Version

15.0.0-rc.0

Describe the Bug

When I specifiy generateImageName in the upload config I get the following error:

 ⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  {name: ..., width: 400, height: 300, position: ..., generateImageName: function generateImageName}

This is the content of my upload config:

  upload: {
    staticUrl: '/media',
    imageSizes: [
      {
        name: 'thumbnail',
        width: 400,
        height: 300,
        position: 'center',
        generateImageName: ({ name, height, sizeName, extension, width }: any) => {
          console.log({name, height, sizeName, extension, width})
          return `custom-${sizeName}-${height}-${width}.${extension}`
        },
      },
   ]
}

Reproduction Steps

1. On a fresh v3 beta installation use the following config:

// storage-adapter-import-placeholder
import { postgresAdapter } from '@payloadcms/db-postgres'
import { lexicalEditor } from '@payloadcms/richtext-lexical'
import path from 'path'
import { buildConfig } from 'payload'
import { fileURLToPath } from 'url'
import sharp from 'sharp'
import { cloudStoragePlugin } from '@payloadcms/plugin-cloud-storage'
import { s3Adapter } from '@payloadcms/plugin-cloud-storage/s3'

import { Users } from './collections/Users'
import { Media } from './collections/Media'

const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

export default buildConfig({
  admin: {
    user: Users.slug,
    importMap: {
      baseDir: path.resolve(dirname),
    },
  },
  collections: [Users, Media],
  editor: lexicalEditor(),
  secret: process.env.PAYLOAD_SECRET || '',
  typescript: {
    outputFile: path.resolve(dirname, 'payload-types.ts'),
  },
  db: postgresAdapter({
    pool: {
      connectionString: process.env.DATABASE_URI || '',
    },
  }) as any,
  sharp,
  plugins: [
    cloudStoragePlugin({
      collections: {
        // Enable cloud storage for Media collection
        media: {
          // Create the S3 adapter
          adapter: s3Adapter({
            config: {
              endpoint: process.env.S3_ENDPOINT,
              credentials: {
                accessKeyId: process.env.S3_ACCESS_KEY_ID as string,
                secretAccessKey: process.env.S3_SECRET_ACCESS_KEY as string,
              },
            },
            bucket: process.env.S3_BUCKET as string,
          }),
        },
      },
    }),
  ],
  upload: {
    staticUrl: '/media',
    imageSizes: [
      {
        name: 'thumbnail',
        width: 400,
        height: 300,
        position: 'center',
        generateImageName: ({ name, height, sizeName, extension, width }: any) => {
          console.log({name, height, sizeName, extension, width})
          return `custom-${sizeName}-${height}-${width}.${extension}`
        },
      },
      {
        name: 'card',
        width: 768,
        height: 1024,
        position: 'center'
      },
      {
        name: 'tablet',
        width: 1024,
        height: 1000,
        position: 'center'
      }
    ],
    crop: false,
    focalPoint: false,
    withoutEnlargement: true,
  }
})

2. Start the server.
3. Open the admin site. You will see the following error:

Adapters and Plugins

• @payloadcms/plugin-cloud-storage
• @payloadcms/plugin-cloud-storage/s3

[timothylp]

I am encountering the same error but in a different context:

 ⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  {condition: function condition}

I'm not sure if it's related. In my case, it is caused by the conditions in the admin property of the fields (tabs type especially).

If I remove all the conditions, I actually get a timeout in the admin. Probably due to NULL data in the database.

[paulpopus]

@bmamouri For the newer betas you should be on Next 15.0.0-canary.104+, does this still happen if you upgrade your next version?

[AlessioGr]

Additionally to what paul said, also make sure to use these react / react-dom versions:

"react": "19.0.0-rc-06d0b89e-20240801",
"react-dom": "19.0.0-rc-06d0b89e-20240801",

[thatsartem]

I also have the same problem. I cannot pass into afterNavLinks component

Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it

[paulpopus]

@thatsartem Do you have a reproduction available for this so we can take a look?

[bmamouri]

Hi @paulpopus, Sorry for the late reply.

I am using 3.0.0-beta.91 version, and now I am getting the following error:

 ⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  {name: ..., width: 400, height: 300, position: ..., generateImageName: function generateImageName}
                                                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^
    at stringify (<anonymous>)
    at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
digest: "2029746183"
 GET /admin/collections/variant/1/ 500 in 4001ms

[github-actions[bot]]

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