TypeError: Cannot destructure property 'config' when using useConfig()

kalon_robsonlast year

21

• 

  alessiogr

  last year

  This happens if you have multiple versions of

  @967091941873426493

  /ui installed. They need to match

  
  
  

  I see in your demo folder you target ^3.2.2 and in your root package.json you target ^3.2.1

  
  
  

  also worth testing out pnpm, I have had better luck with pnpm deduplicating dependencies compared to yarn, when I worked on a similar plugin setup

• 

  kalon_robsonlast year

  Cheers

  @360823574644129795

  , Giving that a go now.

  
  
  

  Just updated the dependencies and got rid of yarn. Still getting the same error. I'm only using the dependencies in the root to reference types. after that when the dist folder gets imported into the payload project it should just be using the demo dependencies

• 

  __zamlast year

  Not sure if this is useful to you but I actually got rid of the error after downgrading to react 18

• 

  kalon_robsonlast year

  Let me try changing my react version to see if it works. However, does Payload and Next 15 not rely on React 19?

• 

  __zamlast year

  I think nextjs runs react 19 in app router anyway.

  
  
  

  I know it's weird but it did for me. Maybe it was something unrelated but it won't hurt to try

• 

  kalon_robsonlast year

  Cheers for the suggestion but this doesn't appear to work in this regard

• 

  powdazelast year

  Had the same issue and it was in fact caused by multiple versions of payloadcms/ui, as Alessio suggested. Running

  pnpm why @payloadcms/ui

  helped identify where the multiple versions were coming from, it was not obvious at first glance. This was the output:

  
  
  

  @payloadcms/next 3.3.0
  └── @payloadcms/ui 3.3.0
  @payloadcms/plugin-seo 3.2.2
  └── @payloadcms/ui 3.2.2
  @payloadcms/richtext-lexical 3.3.0
  ├─┬ @payloadcms/next 3.3.0 peer
  │ └── @payloadcms/ui 3.3.0
  └── @payloadcms/ui 3.3.0
  @payloadcms/ui 3.2.2

  
  
  

  Getting everything to 3.3.0 fixed it for me. Might be worth double checking the versions 🤷

• 

  kalon_robsonlast year

  Didn't think about trying 'pnpm why' will give this a go this afternoon and see what it comes back with

• 

  _j3ns_last year

  I am running into the same issue.The exception is thrown as soon as I enter a document in my plugin dev project which contains a custom component from my plugin:

  
  
  TypeError: Cannot destructure property 'config' of '(0 , _chunk_CKHKQPOO_js__WEBPACK_IMPORTED_MODULE_10__.b)(...)' as it is undefined.

pnpm why @payloadcms/ui

  outputs

  @payloadcms/ui 3.4.0

  in both the plugin root folder and the dev folder.

• 

  alessiogr

  last year

  This could also be caused by duplicative react versions. So check out

  pnpm why react

  and

  pnpm why react-dom
  
  

  And if that does not work, I would experiment with different pnpm settings (those related to how packages are hoisted) and make sure symlinking is enabled

  
  
  

  Also, I would manually check the pnpm-lock.json for duplicative package versions.

  pnpm why

  sometimes does not display all of them

• 

  __zamlast year

  This could also be caused by duplicative react versions
  

  
  @618601682460344334

  Maybe that's why the react downgrade worked for me but not for you.

• 

  kalon_robsonlast year

  pnpm why @payloadcms/ui
  

  @payloadcms/next 3.2.2
  └── @payloadcms/ui 3.2.2
  @payloadcms/richtext-lexical 3.2.2
  ├─┬ @payloadcms/next 3.2.2 peer
  │ └── @payloadcms/ui 3.2.2
  └── @payloadcms/ui 3.2.2

  
  
  pnpm why react
  

  @payloadcms/db-mongodb 3.2.2
  └─┬ payload 3.2.2 peer
    └─┬ @monaco-editor/react 4.6.0
      ├── react 19.0.0-rc-65a56d0e-20241020 peer
      └─┬ react-dom 19.0.0-rc-65a56d0e-20241020 peer
        └── react 19.0.0-rc-65a56d0e-20241020 peer
  @payloadcms/next 3.2.2
  ├─┬ @dnd-kit/core 6.0.8
  │ ├─┬ @dnd-kit/accessibility 3.1.1
  │ │ └── react 19.0.0-rc-65a56d0e-20241020 peer
  │ ├─┬ @dnd-kit/utilities 3.2.2
  │ │ └── react 19.0.0-rc-65a56d0e-20241020 peer
  │ ├── react 19.0.0-rc-65a56d0e-20241020 peer
  │ └─┬ react-dom 19.0.0-rc-65a56d0e-20241020 peer
  │   └── react 19.0.0-rc-65a56d0e-20241020 peer
  ├─┬ @payloadcms/graphql 3.2.2
  │ └─┬ payload 3.2.2 peer
  │   └─┬ @monaco-editor/react 4.6.0
  │     ├── react 19.0.0-rc-65a56d0e-20241020 peer
  │     └─┬ react-dom 19.0.0-rc-65a56d0e-20241020 peer
  │       └── react 19.0.0-rc-65a56d0e-20241020 peer
  └─┬ @payloadcms/ui 3.2.2
    └─┬ @dnd-kit/core 6.0.8
      ├─┬ @dnd-kit/accessibility 3.1.1
      │ └── react 19.0.0-rc-65a56d0e-20241020 peer
      └─┬ @dnd-kit/utilities 3.2.2
        └── react 19.0.0-rc-65a56d0e-20241020 peer

  
  
  

  Everything looks as if it matches and I've even attempted '--shamefully-hoist' the packages and the error persists

  
  
  

  Hi

  @360823574644129795

  I'm out of ideas on this one, do you still suspect it is on my side or should I try producing a minimal recreation and opening an issue on GH?

• 

  alessiogr

  last year

  I wouldn't open an issue, I'm pretty sure this is an issue with the specific set-up and not with Payload. Looking at your repo, the demo folder is basically its own project, independent of the parent project. While the

  @967091941873426493

  /ui version may be the same, it's likely using its own copy, without deduplicating it. / It has its own independent node_modules

  
  
  

  I think you should try to move this to a pnpm monorepo

  
  
  

  I had a pretty similar setup like yours with my old lexical plugin, and had to alias react to use the react from the parent node_modules:

  https://github.com/AlessioGr/payload-plugin-lexical/blob/develop/demo/src/payload.config.ts#L27
• 

  kalon_robsonlast year

  I though the same so set up a clean project using npx create-payload-app and installed this as a module so no devDependancies would have been used and the issue persisted

• 

  alessiogr

  last year

  Did you pack it as .tar.gz and installed that in a fresh payload app?

  
  
  

  I would try moving

  @967091941873426493

  /ui to

  peerDependencies

  instead of

  devDependencies
• 

  kalon_robsonlast year

  Right, you must be right that its a mismatch because deleting the root node_modules then starting demo works

  
  
  

  Got it working, just had to comb through and lock the packages to specific versions. Shame pnpm why didn't help resolve this,

  
  
  

  Thanks for the help all

• 

  jm.svlast year

  Adding

  
  

      {
        "dependencies": ["@payloadcms/*", "payload"],
        "packages": ["**"],
        "pinVersion": "^3.15.1"
      },

  
  

  to a

  .syncpackrc.json

  was super helpful for this

• 

  jeffman_3last year

  Hi how did you go about locking the packages to specific versions. I am having the exact same issue but cant find a solution.

  
  
  

  I have tried all the steps above

• 

  kalon_robsonlast year

  What package manager are you using?

• 

  jeffman_3last year

  pnpm

• 

  kalon_robsonlast year

  I created a 'pnpm-workspace.yaml' with the contents of

  
  

  packages:

  
  

  - '.'

  
  

  - 'demo'

  
  
  
  

  I then went through both package.json and removed the '^' so "

  @967091941873426493

  /eslint-config": "^3.0.0", is now ""

  @967091941873426493

  /eslint-config": "3.0.0".

  
  

  Removed the package-lock.yaml and the node_modules from both and then installed at root first then demo second and this seemed to fix it