I’m working on a custom field component for a Payload CMS array field. I followed the Payload CMS docs and attempted to use useField to manage the field’s value. Here’s the code:
'use client'
import { ArrayFieldClientProps } from 'payload'
import { useField } from '@payloadcms/ui'
export default function SeriesProductParameterValueField({ path }: ArrayFieldClientProps) {
console.log('path', path)
const { value, setValue } = useField({ path })
return <div>SeriesProductParameterValueField</div>
}
However, the line const { value, setValue } = useField({ path })
throws the following error:
Unhandled Runtime Error: TypeError: Cannot destructure property 'config' of
'(0 , _chunk_3MXUY6XL_js__WEBPACK_IMPORTED_MODULE_10__.b)(...)' as it is undefined.
Here’s a snippet of my collection configuration for context:
{
name: 'products',
type: 'array',
fields: [
{
type: 'row',
fields: [
{
name: 'title',
type: 'text',
required: true,
},
{
name: 'image',
type: 'upload',
relationTo: 'media',
required: true,
},
],
},
],
},
{
name: 'parameterGroups',
type: 'array',
fields: [
{
name: 'title',
type: 'text',
required: true,
localized: true,
},
{
name: 'parameters',
type: 'array',
fields: [
{
name: 'parameter',
type: 'relationship',
relationTo: 'parameters',
required: true,
},
{
name: 'values',
type: 'array',
fields: [
{
name: 'productId',
type: 'text',
required: true,
unique: true,
},
{
name: 'value',
type: 'text',
localized: true,
},
],
admin: {
components: {
Field: '/components/payload/series-product-parameter-value-field',
},
},
},
],
},
],
},
- Why is useField throwing this error?
- Is there something wrong with how I’m setting up useField or the component path in the config?
- Any guidance or examples for implementing custom field components in Payload CMS?
Thanks in advance for your help!