I have a custom Field component which calls
useFieldfrom
@payloadcms/uiWhen trying to access a collection item in the admin which uses this
Fieldcomponent, I get the following error:
TypeError: Cannot destructure property 'config' of '(0 , _providers_Config_index_js__WEBPACK_IMPORTED_MODULE_7__.useConfig)(...)' as it is undefined. 15 | const [fields] = useAllFormFields();
16 |
> 17 | const { setValue: setEnableEditSlug, value: enableEditSlug } = useField({
| ^
18 | path: 'enableEditSlug',
19 | });
20 |I have seen some other users on here also running into the same issue, so here's a breakdown of things I have already tried to do to remedy the issue:
1. Tried using different versions of Payload v3. I have seen some people say upgrading/downgrading has fixed the issue for them. A few of the versions I have tried are 3.13.0, 3.15.0, 3.17.0, 3.19.0 (and I'm pretty sure I have tried even more than that).
2. Seen that the issue might be there are multiple different versions of
@payloadcms/uiinstalled and to make sure that there's only one version. I have confirmed this, and every time I have switched Payload version to test with I have also included the ui package to be set to that version.
If this information is helpful, I currently have the application setup with the following:
- Payload 3.15.0
- React 19.0.0
- Next 15.1.5
- Uses pnpm version 8.15.4
If there's any more information that I can offer, I'd be happy to provide it.
Thanks in advance!
Hey
@125106825489022977try and delete your node_modules and your lockfile, and then reinstall. You may have two copies of
@payloadcms/uiinstalled, which is why
useConfigis returning undefined
you can also run
pnpm why @payloadcms/uito see if there are duplicative versions installed
but i'd delete your lockfile and your node_modules and reinstall from scratch to be sure
Hi
@364124941832159242thanks for the response.
I have tried these steps and still look to be receiving the error. Running
pnpm why @payloadcms/uiis showing that I only have 1 version of the package installed as well.
oh shoot
i see the issue
you are importing from direct paths in the
uipackage
you should import everything from just
@payloadcms/uiimport { CheckboxInput, TextInput, useAllFormFields, useField, useDocumentInfo, useLocale } from '@payloadcms/ui';try that
if you are using the
uipackage for customizing the Payload admin UI, you should import directly
if you are using the
uipackage
outsideof the admin UI, then you import directly
this is because we pre-bundle everything and make things optimized for Payload's admin UI
so by importing
useFielddirectly, you're getting a
different copythan what is used by Payload's admin UI
That's good info to know I was not aware of that, so thanks for that knowledge. I'll give that a try!
That did solve this issue.
There's one other error I'm encountering, but I think I might be able to figure this one out.
Thanks again for the quick response and spending time taking a look!
I encounter the same error, but I have no direct path imports, could you help me?
Star
Discord
online
Get dedicated engineering support directly from the Payload team.