[3.0.0-beta.30] Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components about payload HOT 5 OPEN

// payload.config.ts

import path from 'path'
import sharp from 'sharp'
import { fileURLToPath } from 'url'
import { en } from 'payload/i18n/en'
import { ru } from 'payload/i18n/ru'
import { buildConfig } from 'payload/config'
import { slateEditor } from '@payloadcms/richtext-slate'
import { postgresAdapter } from '@payloadcms/db-postgres'
import { nestedDocsPlugin } from '@payloadcms/plugin-nested-docs'
import { searchPlugin } from '@payloadcms/plugin-search'

import Users from './src/collections/Users'
import Products from './src/collections/Products'
import Categories from './src/collections/Categories'
import Tags from './src/collections/Tags'
import Media from './src/collections/Media'
import SpecGroup from './src/collections/SpecGroup'
import SpecName from './src/collections/SpecName'
import SpecValue from './src/collections/SpecValue'
import ProductSpecs from './src/collections/ProductSpecs'
import Pages from './src/collections/Pages'
import Widgets from './src/collections/Widgets'
import Orders from './src/collections/Orders'

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

export default buildConfig({
  cors: process.env.NODE_ENV === 'production' ? undefined : '*',
  admin: {
    user: Users.slug,
    // css: path.resolve(__dirname, './src/assets/styles/base.scss'),
    // bundler: viteBundler(),
  },
  editor: slateEditor({}),
  collections: [
    Users,
    Products,
    Categories,
    Tags,
    Media,
    ProductSpecs,
    SpecGroup,
    SpecName,
    SpecValue,
    Pages,
    Widgets,
    Orders,
  ],
  secret: process.env.PAYLOAD_SECRET || '',
  typescript: {
    outputFile: path.resolve(dirname, 'payload-types.ts'),
  },
  plugins: [
    // payloadCloud(),
    searchPlugin({
      collections: [Products.slug],
      searchOverrides: {
        admin: {
          hidden: true,
        },
      },
    }),
    nestedDocsPlugin({
      collections: [Categories.slug],
      generateURL: (docs) => docs.reduce((_, doc) => `/catalog/${doc.slug}`, ''),
    }),
  ],
  db: postgresAdapter({
    pool: {
      connectionString: process.env.DATABASE_URI,
    },
  }),
  i18n: {
    supportedLanguages: { en, ru },
  },
  sharp,
})

// src/collections/Media.ts
import { CollectionConfig } from 'payload/types'

const Media: CollectionConfig = {
  slug: 'media',
  access: {
    read: () => true,
    create: () => true,
  },
  labels: {
    singular: {
      en: 'Media',
      ru: 'Медиа',
    },
    plural: {
      en: 'Media',
      ru: 'Медиа',
    },
  },
  fields: [
    {
      name: 'alt',
      type: 'text',
    },
  ],
  upload: {
    staticDir: 'media',
    imageSizes: [
      {
        name: 'thumbnail',
        width: 256,
        height: 256,
        position: 'centre',
      },
      {
        name: 'card',
        width: 512,
        height: 512,
        position: 'centre',
      },
      {
        name: 'tablet',
        width: 1024,
        height: 1024,
        position: 'centre',
      },
      {
        name: 'banner',
        width: 1256,
        height: 400,
        position: 'centre',
      },
    ],
    adminThumbnail: 'thumbnail',
    mimeTypes: ['image/*'],
  },
}

export default Media

Field: ({ payload: _payload, ...props }) => <Uppy {...props} />,

Field: ({ payload: _payload, ...props }) => <SpecList {...props} />,

// src/collections/Products.ts

import { CollectionConfig } from 'payload/types'
import Tags from '../Tags'
import ProductSpecs from '../ProductSpecs'
import SpecList from './ui/SpecList'
import SpecGroup from '../SpecGroup'
import SpecName from '../SpecName'
import SpecValue from '../SpecValue'
import productSpecsHook from './hooks/product-specs'
import productMediaHook from './hooks/product-media'
// import initSpecsHook from './hooks/init-specs'
// import validateSpecs from './validations/validate-specs'
import Uppy from '../../app/(payload)/components/Uppy'
import Media from '../Media'
import SaveButton from './ui/SaveButton'
import generateSlug from '../hooks/generate-slug'

const Products: CollectionConfig = {
  slug: 'products',
  access: {
    read: () => true,
    create: () => true,
    update: () => true,
  },
  hooks: {
    beforeOperation: [generateSlug],
  },
  admin: {
    useAsTitle: 'title',
    components: {
      edit: {
        SaveButton,
      },
    },
  },
  labels: {
    singular: {
      en: 'Product',
      ru: 'Товар',
    },
    plural: {
      en: 'Products',
      ru: 'Товары',
    },
  },
  fields: [
    {
      name: 'title',
      type: 'text',
      required: true,
      label: {
        en: 'Title',
        ru: 'Название',
      },
    },
    {
      name: 'slug',
      type: 'text',
      unique: true,
      admin: {
        hidden: true,
      },
      label: {
        en: 'Slug',
        ru: 'Строка',
      },
    },
    {
      name: 'hero',
      type: 'upload',
      relationTo: 'media',
      required: true,
      label: {
        en: 'Hero',
        ru: 'Изображение',
      },
    },
    {
      name: 'category',
      type: 'relationship',
      required: true,
      relationTo: 'categories',
      hasMany: false,
      admin: {
        position: 'sidebar',
      },
      label: {
        en: 'Catergory',
        ru: 'Категория',
      },
    },
    {
      name: 'sku',
      type: 'text',
      required: true,
      unique: true,
      admin: {
        position: 'sidebar',
      },
      label: {
        en: 'Sku',
        ru: 'Артикул',
      },
    },
    {
      name: 'stock',
      type: 'number',
      defaultValue: 0,
      required: true,
      admin: {
        position: 'sidebar',
      },
      label: {
        en: 'Stock',
        ru: 'Наличие',
      },
    },
    {
      name: 'status',
      type: 'text',
      admin: {
        position: 'sidebar',
      },
      label: {
        en: 'Status',
        ru: 'Статус',
      },
    },
    {
      name: 'prices',
      type: 'group',
      interfaceName: 'Prices',
      label: {
        en: 'Prices',
        ru: 'Цены',
      },
      admin: {
        position: 'sidebar',
      },
      fields: [
        {
          name: 'retail',
          type: 'number',
          required: true,
          label: {
            en: 'Retail',
            ru: 'Розничная цена',
          },
        },
        {
          name: 'purchase',
          type: 'number',
          label: {
            en: 'Purchase',
            ru: 'Оптовая цена',
          },
        },
        {
          name: 'discount',
          type: 'number',
          label: {
            en: 'Discount',
            ru: 'Скидка',
          },
        },
        {
          name: 'currency',
          type: 'text',
          required: true,
          defaultValue: '₸',
          label: {
            en: 'Currency',
            ru: 'Валюта',
          },
        },
      ],
    },
    {
      name: 'description',
      type: 'richText',
      label: {
        en: 'Description',
        ru: 'Описание',
      },
    },
    {
      name: 'media',
      type: 'relationship',
      relationTo: Media.slug,
      hasMany: true,
      label: {
        en: 'Media',
        ru: 'Медиа файлы',
      },
      admin: {
        components: {
          Field: Uppy,
        },
      },
      // hooks: {
      //   beforeChange: [productMediaHook],
      // },
    },
    {
      name: 'productspecs',
      type: 'relationship',
      relationTo: ProductSpecs.slug,
      hasMany: true,
      label: {
        en: 'Specifications',
        ru: 'Характеристики',
      },
      admin: {
        custom: {
          fields: [
            {
              name: 'group',
              type: 'ui',
              custom: {
                collection: SpecGroup.slug,
              },
              label: {
                en: 'Group',
                ru: 'Группа',
              },
            },
            {
              name: 'name',
              type: 'ui',
              custom: {
                collection: SpecName.slug,
              },
              label: {
                en: 'Name',
                ru: 'Название',
              },
            },
            {
              name: 'value',
              type: 'ui',
              custom: {
                collection: SpecValue.slug,
              },
              label: {
                en: 'Value',
                ru: 'Значение',
              },
            },
          ],
        },
        components: {
          Field: SpecList,
        },
      },
      hooks: {
        beforeChange: [productSpecsHook],
        // afterRead: [initSpecsHook]
      },
      // validate: validateSpecs,
    },
    {
      name: 'dimensions',
      type: 'group',
      interfaceName: 'Dimensions',
      admin: {
        className: 'product-dimensions',
      },
      label: {
        en: 'Dimensions (mm)',
        ru: 'Размеры (мм)',
      },
      fields: [
        {
          name: 'width',
          type: 'number',
          admin: {
            width: '24%',
          },
          label: {
            en: 'Width',
            ru: 'Ширина',
          },
        },
        {
          name: 'height',
          type: 'number',
          admin: {
            width: '24%',
          },
          label: {
            en: 'Height',
            ru: 'Высота',
          },
        },
        {
          name: 'length',
          type: 'number',
          admin: {
            width: '24%',
          },
          label: {
            en: 'Length',
            ru: 'Длина',
          },
        },
        {
          name: 'weight',
          type: 'number',
          admin: {
            width: '24%',
          },
          label: {
            en: 'Weight',
            ru: 'Вес',
          },
        },
      ],
    },
    {
      name: 'model',
      type: 'text',
      label: {
        en: 'Model',
        ru: 'Модель',
      },
    },
    {
      name: 'manufacturer',
      type: 'text',
      label: {
        en: 'Manufacturer',
        ru: 'Производитель',
      },
    },
    {
      name: 'country',
      type: 'text',
      label: {
        en: 'Country',
        ru: 'Страна',
      },
    },
    {
      name: 'isVisible',
      defaultValue: true,
      type: 'checkbox',
      label: {
        en: 'Visiblity',
        ru: 'Видимость',
      },
    },
    {
      name: 'tags',
      type: 'relationship',
      hasMany: true,
      relationTo: Tags.slug,
      admin: {
        position: 'sidebar',
      },
      label: {
        en: 'Tags',
        ru: 'Тэги',
      },
    },
    {
      name: 'views',
      type: 'number',
      hidden: true,
      defaultValue: 0,
      label: {
        en: 'Views',
        ru: 'Просмотры',
      },
    },
  ],
}

export default Products