When opening Drawer of upload - Error is logged

[tsemachh]

trafficstars

Link to reproduction

No response

Payload Version

3.0.0-beta.73

Node Version

v22.5.1

Next.js Version

15.0.0-canary.59

Describe the Bug

When opening drawer(like media drawer) error is written to the log. This relates to next fixed issue (https://github.com/payloadcms/payload/pull/7117/files) In file: packages/ui/src/utilities/buildFormState.ts - Lines 70-74 ` const schemaPathSegments = schemaPath && schemaPath.split('.')

let fieldSchema: Field[]

if (schemaPathSegments.length === 1) { ` What happens is the first line fixes case where schemaPath is null | undefined, now the last line there fails of schemaPathSegments is null | undefined

Reproduction Steps

Launch clean payload website Get a pop-up window (or by uploading new media, creating a new object in a relationship filed by the "+" button, editing an object in a relationship filed etc) Go to the console window next error appears: TypeError: Cannot read properties of undefined (reading 'length') at s (webpack://cmweb2/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_pkgadj7m7kr4pzubcssln6zqda/node_modules/@payloadcms/ui/dist/utilities/buildFormState.js:56:1) at Object.tG (webpack://cmweb2/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_reac_n6ltizgmd5y7vof4nhh6owui3i/node_modules/@payloadcms/next/dist/routes/rest/buildFormState.js:11:30) at <anonymous> (webpack://cmweb2/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_reac_n6ltizgmd5y7vof4nhh6owui3i/node_modules/@payloadcms/next/dist/routes/rest/index.js:505:1) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async /app/node_modules/.pnpm/[email protected][email protected][email protected]_4ufrqkh5d53l6fnnndwj65u64a/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:14:38428 at async ek.execute (/app/node_modules/.pnpm/[email protected][email protected][email protected]_4ufrqkh5d53l6fnnndwj65u64a/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:14:28642) at async ek.handle (/app/node_modules/.pnpm/[email protected][email protected][email protected]_4ufrqkh5d53l6fnnndwj65u64a/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:14:39729) at async doRender (/app/node_modules/.pnpm/[email protected][email protected][email protected]_4ufrqkh5d53l6fnnndwj65u64a/node_modules/next/dist/server/base-server.js:1402:42) at async responseGenerator (/app/node_modules/.pnpm/[email protected][email protected][email protected]_4ufrqkh5d53l6fnnndwj65u64a/node_modules/next/dist/server/base-server.js:1666:28) at async NextNodeServer.renderToResponseWithComponentsImpl (/app/node_modules/.pnpm/[email protected][email protected][email protected]_4ufrqkh5d53l6fnnndwj65u64a/node_modules/next/dist/server/base-server.js:1673:28)

Adapters and Plugins

No response

[jessrynkar]

Hi @tsemachh I was not able to reproduce this - when opening the upload drawer on latest beta I see no errors in the console.

Could you create a minimal project using npx create-payload-app@beta and confirm that you can replicate this issue? If you can reproduce with a fresh install, please commit the repo you created to GitHub and share it with us. Thank you!

[tsemachh]

@JessChowdhury We can try , just look at the code it can break easily It's not a big change anyway

[ChannKan]

@JessChowdhury @tsemachh I have this issue as well - this issue is not only for the upload window it happens with any pop-up window on Payload. (ex. the + button in relationship fields or editing a relationship value via the editor icon) I tried opening a GH issue for it - but this bug doesn’t reproduce on the fork provided for opening GH issues . If you want to reproduce this bug you need to:

1. Open a new instance of Payload
2. Make a relationship field (or any other pop-up window)
3. Launch Payload
4. Click on the + button on the relationship field (or open other pop-up window)
5. Go to the logs and see the error

It will be very helpful if this is fixed, it really messes up the logs

[jessrynkar]

@ChannKan I have followed your steps and still am not receiving the error. Please provide a minimal reproduction and I will take another look.

[ChannKan]

@JessChowdhury here is a path to a reproduction : https://github.com/shefing/PayloadSplitBug You need to:

1. Clone the repo
2. Run pnpm install & launch payload
3. Create a new Categories (in collections )
4. Click on the the mediaRe relationship '+' button
5. Go to the terminal console window and see the error

Note that this project is with beta.65 version , from version 68 it is a 'length error' (you can change the version in the packege.json file).

[ChannKan]

@JessChowdhury any progress ? link for reproduction(see above ) : https://github.com/shefing/PayloadSplitBug

[steventsvetkov]

I'm encountering a similar issue since beta 90, currently on beta 97 with next.js canary.104. I'm using this template https://github.com/payloadcms/payload-3.0-demo with the following changes.

1. A Media collection used to store all images that uses S3 storage plugin to store files at Cloudflare's R2
2. A Products collection that has a headerImage field that is of type upload and with relation to Media

When I create a new product and click on add on the headerImage field, I get the following error in the terminal:

GET /admin/collections/products/create 200 in 177ms
GET /favicon.ico 200 in 3ms
POST /api/form-state 200 in 39ms
[17:50:13] ERROR: aborted
    err: {
      "type": "Error",
      "message": "aborted",
      "stack":
          Error: aborted
              at abortIncoming (node:_http_server:797:17)
              at socketOnClose (node:_http_server:791:3)
              at Socket.emit (node:events:531:35)
              at TCP.<anonymous> (node:net:338:12)
              at TCP.callbackTrampoline (node:internal/async_hooks:130:17)
      "code": "ECONNRESET"
    }
[17:50:13] ERROR: There was an error building form state
    err: {
      "type": "TypeError",
      "message": "Cannot read properties of undefined (reading 'length')",
      "stack":
          TypeError: Cannot read properties of undefined (reading 'length')
              at buildFormState (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected][email protected][email protected]_babel-plugin-react-c_tgam3buwftdrnmtdbx2df5knau/node_modules/@payloadcms/ui/dist/utilities/buildFormState.js:69:26)
              at Object.buildFormState [as form-state] (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_bab_hc4erztwr57vzp6kpkq6lqi4e4/node_modules/@payloadcms/next/dist/routes/rest/buildFormState.js:21:113)
              at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_bab_hc4erztwr57vzp6kpkq6lqi4e4/node_modules/@payloadcms/next/dist/routes/rest/index.js:589:45)
              at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
...
POST /api/form-state 200 in 35ms

[tsemachh]

The fix is very clear I can open a PR if needed

[hristokoev]

I'm encountering a similar issue since beta 90, currently on beta 97 with next.js canary.104. I'm using this template https://github.com/payloadcms/payload-3.0-demo with the following changes.

1. A Media collection used to store all images that uses S3 storage plugin to store files at Cloudflare's R2
2. A Products collection that has a headerImage field that is of type upload and with relation to Media

When I create a new product and click on add on the headerImage field, I get the following error in the terminal:

GET /admin/collections/products/create 200 in 177ms
GET /favicon.ico 200 in 3ms
POST /api/form-state 200 in 39ms
[17:50:13] ERROR: aborted
    err: {
      "type": "Error",
      "message": "aborted",
      "stack":
          Error: aborted
              at abortIncoming (node:_http_server:797:17)
              at socketOnClose (node:_http_server:791:3)
              at Socket.emit (node:events:531:35)
              at TCP.<anonymous> (node:net:338:12)
              at TCP.callbackTrampoline (node:internal/async_hooks:130:17)
      "code": "ECONNRESET"
    }
[17:50:13] ERROR: There was an error building form state
    err: {
      "type": "TypeError",
      "message": "Cannot read properties of undefined (reading 'length')",
      "stack":
          TypeError: Cannot read properties of undefined (reading 'length')
              at buildFormState (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected][email protected][email protected]_babel-plugin-react-c_tgam3buwftdrnmtdbx2df5knau/node_modules/@payloadcms/ui/dist/utilities/buildFormState.js:69:26)
              at Object.buildFormState [as form-state] (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_bab_hc4erztwr57vzp6kpkq6lqi4e4/node_modules/@payloadcms/next/dist/routes/rest/buildFormState.js:21:113)
              at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_bab_hc4erztwr57vzp6kpkq6lqi4e4/node_modules/@payloadcms/next/dist/routes/rest/index.js:589:45)
              at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
...
POST /api/form-state 200 in 35ms

I think this is the same issue as https://github.com/payloadcms/payload/issues/7702

I can confirm I'm also experiencing exactly the same as you've described. Also this issue that I've posted a few days ago is very likely related: https://github.com/payloadcms/payload/issues/7898

[tsemachh]

@JessChowdhury opened a PR for the fix:| https://github.com/payloadcms/payload/pull/8223

[tsemachh]

Closing the issue @PatrikKozak handled it as part of #7970

[github-actions[bot]]

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