LinkToDocClient server pre-rendering fails

[cbratschi]

Describe the Bug

The component uses for instance useConfig() and useField(). Both returned values are used right away in the component without verifying if they are defined. While server rendering config is undefined and the code fails:

TypeError: Cannot read properties of undefined (reading 'config')

Changes are needed here:

https://github.com/payloadcms/payload/blob/main/packages/plugin-search/src/Search/ui/LinkToDoc/index.client.tsx#L17

The optional chaining used here is no longer in the transpilled JavaScript code:

https://github.com/payloadcms/payload/blob/main/packages/plugin-search/src/Search/ui/LinkToDoc/index.client.tsx#L21

Link to the code that reproduces this issue

https://github.com/cbratschi/payload

Reproduction Steps

Create a search collection, open the collection in the admin panel and select a document. Error occurs here.

Which area(s) are affected? (Select all that apply)

plugin: search

Environment Info

Binaries:
  Node: 22.9.0
  npm: 10.8.3
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  payload: 3.6.0
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:05:23 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T6031
  Available memory (MB): 65536
  Available CPU cores: 16

[cbratschi]

The error happens while destructuring the useConfig() result:

 ⨯ TypeError: Cannot destructure property 'config' of '(0 , _payloadcms_ui__WEBPACK_IMPORTED_MODULE_2__.b)(...)' as it is undefined.
    at config (../../../../src/Search/ui/LinkToDoc/index.client.tsx:10:10)
   8 |
   9 | export const LinkToDocClient: React.FC = () => {
> 10 |   const { config } = useConfig()
     |          ^
  11 |
  12 |   const {
  13 |     routes: { {
  digest: '2258378641'
}

[akhrarovsaid]

Hey @cbratschi I'll investigate here, but just wanted to let you know the reason why you're not seeing those optional chaining checks in the js is because those changes haven't been released yet after being merged in. This is why you see them in the source but can't find an instance of them.

PR for it was here.

[akhrarovsaid]

Hey @cbratschi,

The PR I linked above was included in 3.9.0! I can't reproduce a runtime error on search docs with undefined related docs anymore. I'm also not getting an error related to config otherwise. Can you confirm with latest?

[mcornielje090404]

I'm seeing a similar issue when attempting to use useField on a custom component.

It's fine using useConfig within the component itself but whenever I use useField it fails with the same webpack error above "Cannot destructure property 'config'"

This is pretty critical as it's totally preventing the use of custom components...

[cbratschi]

It works now fine with Payload 3.12.0.

[github-actions[bot]]

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