“g is not defined” error when using the ListControls component with a custom component in Payload beta version 121

[andyLyon-212]

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