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.

Hooks (useConfig, useForm etc.) returning empty objects in Payload pnpm monorepo setup

default discord avatar
58bitslast year
2

Hi All,



We're working on an upgrade to Payload 2.0 in a monorepo setup.



Everything went fairly smoothly - we followed the 2.0 release notes here

https://github.com/payloadcms/payload/releases/tag/v2.0.0

and we can build Payload using the webpackBundler fine. The admin dashboard loads fine as well.



However, I think we're still missing something in terms of where Payload is looking for configuration information. We have a few custom components that call

useConfig

useForm

etc., but they're returning empty objects and cause errors when we try to access a collection that has one of our special components in it.



We start payload in dev as follows:


"dev": "PAYLOAD_CONFIG_PATH=../cms/dist/payload.config.js NODE_ENV=development remix dev --manual -c \"node --conditions=serve server.js\" | pino-pretty",

And our custom express server initializes Payload as...



import cms from '@project/cms'
const { payload } = cms
...


...
// Payload section here - top level await since we're now an ESM module
await payload.init({
  secret: PAYLOAD_SECRET,
  express: app,
  onInit: () => {
    payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`)
  }
})
...


We've read in the docs that it may help to pass the Payload config directly to init...

https://github.com/payloadcms/payload/blob/3e5149bc432578b5c547e19eb9ed360d8e6c4626/packages/payload/src/config/types.ts#L115

- would this help? Confess we're not 100% sure how this works.



Feels like we're missing something fundamental when we bootstrap payload. Any thoughts or suggestions greatly appreciated.



If this helps - it's not just our components.

useConfig

is returning an empty object for the new Lexical richtext editor....


map is failing because collections in

const { collections } = useConfig()

is undefined

@360823574644129795

any ideas?

  • discord user avatar
    alessiogr
    last year

    First thing I'd do is to absolutely make sure that you do not have duplicate versions of payload, react or react-dom installed.



    99% of times, if a react hook like that returns undefined, it's because that piece of code is using a different, duplicated version of payload/react/react-dom



    Had a similar problem inside the payload repo too - one thing which helped was switching from yarn monorepos to pnpm monorepos. pnpm seems to handle that better

  • default discord avatar
    58bitslast year

    Thanks

    @360823574644129795

    - I'll try a few things.



    You were spot on, and we found the duplicate version of Payload - thanks

    @360823574644129795
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.