Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

TypeError: Cannot destructure property 'config'

default discord avatar
plooqlast year
5

I have a custom Field component which calls

useField

from

@payloadcms/ui

When trying to access a collection item in the admin which uses this

Field

component, 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/ui

installed 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!

  • discord user avatar
    jmikrut
    last year

    Hey

    @125106825489022977

    try and delete your node_modules and your lockfile, and then reinstall. You may have two copies of

    @payloadcms/ui

    installed, which is why

    useConfig

    is returning undefined



    you can also run

    pnpm why @payloadcms/ui

    to see if there are duplicative versions installed



    but i'd delete your lockfile and your node_modules and reinstall from scratch to be sure

  • default discord avatar
    plooqlast year

    Hi

    @364124941832159242

    thanks for the response.



    I have tried these steps and still look to be receiving the error. Running

    pnpm why @payloadcms/ui

    is showing that I only have 1 version of the package installed as well.

  • discord user avatar
    jmikrut
    last year

    oh shoot



    i see the issue



    you are importing from direct paths in the

    ui

    package



    you should import everything from just

    @payloadcms/ui

    import { CheckboxInput, TextInput, useAllFormFields, useField, useDocumentInfo, useLocale } from '@payloadcms/ui';


    try that



    if you are using the

    ui

    package for customizing the Payload admin UI, you should import directly



    if you are using the

    ui

    package

    outside

    of 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

    useField

    directly, you're getting a

    different copy

    than what is used by Payload's admin UI

  • default discord avatar
    plooqlast year

    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!

  • default discord avatar
    wangzhijunlast year

    I encounter the same error, but I have no direct path imports, could you help me?

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.