Description
Describe the Bug
After cloning the repository and installing Payload beta version 121, I created a custom component called Search and used it within a ui field. When utilizing the ListControls component inside this custom component and passing it a collection of type ClientCollectionConfig, I encounter the error “g is not defined”. Here’s the relevant code from my Search component:
'use client'
import React from 'react'
import { useField, TextField, Button, ListControls, useConfig } from '@payloadcms/ui'
import { TextFieldValidation, TextFieldClientProps } from 'payload'
import { text } from 'payload/shared'
import type { ClientCollectionConfig } from 'payload'
const colorMissingOctothorpRegex = new RegExp("^([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{3})$");
export const Search: React.FC = ({ ...props }) => {
const { value, setValue } = useField({})
const validateText: TextFieldValidation = (value, options) => {
if (value && colorMissingOctothorpRegex.test(value)) {
value = #${value}
setValue(value)
}
return text(value, options)
}
const collectionSlug = 'pages';
const { getEntityConfig } = useConfig()
const collectionConfig = getEntityConfig({ collectionSlug }) as ClientCollectionConfig
console.log('collectionConfig', collectionConfig);
console.log('collectionConfig', collectionConfig.fields);
return (
<div className={'flex items-center gap-6'}>
<div
className={'color-swatch w-32 h-32'}
style={{ backgroundColor: value || '#00000000' }}
/>
<TextField {...props} validate={validateText} />
<Button
aria-label='Create New'
buttonStyle="pill"
onClick={() => { console.log('hello') }}
size="small"
>
Create New
)
}
Link to the code that reproduces this issue
https://github.com/andyLyon-212/payload-component-list-control
Reproduction Steps
Steps to reproduce:
1. Clone the repository and install Payload beta version 121.
2. Create the Search component as shown in the code and use it within a ui field.
3. Pass a collection configuration to ListControls.
4. Run the project and observe the console error.
Which area(s) are affected? (Select all that apply)
Not sure
Environment Info
Added by Payload
Database connection string
DATABASE_URI=mongodb://127.0.0.1/web
Used to encrypt JWT tokens
PAYLOAD_SECRET=b286822e58537e73583baa3c
Used to format links and URLs
PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000
NEXT_PUBLIC_SERVER_URL=http://localhost:3000
Allow robots to index the site (optional)
NEXT_PUBLIC_IS_LIVE=
Used to preview drafts
PAYLOAD_PUBLIC_DRAFT_SECRET=demo-draft-secret
NEXT_PRIVATE_DRAFT_SECRET=demo-draft-secret
Used to revalidate static pages
REVALIDATION_KEY=demo-revalation-key
NEXT_PRIVATE_REVALIDATION_KEY=demo-revalation-key