“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<TextFieldClientProps> = ({ ...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 </Button> <ListControls collectionConfig={collectionConfig} fields={collectionConfig.fields} /> ) }

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

[github-actions[bot]]

This issue has been marked as stale due to lack of activity.

To keep this issue open, please indicate that it is still relevant in a comment below.

[github-actions[bot]]

This issue was automatically closed due to lack of activity.

[zubricks]

Hey @andyLyon-212 did this resolve in a new version of Payload? If you can provide an example repo I'll open this back up to test if so.

[github-actions[bot]]

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