payloadcms / payloadcms/payload

Lexical Upload node `fields` prop type not matching database

Open
#14,638 1 comment 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

stale status: needs-triage
Dominant language
TypeScript
Stars
44.8k
Forks
4.2k
Avg merge
2d 21h
Merged PRs (30d)
53

Description

Describe the Bug

According to the type of the Lexical upload the fields prop cannot be null. However in practice, it can be. This causes TS errors if you use SerializedUploadNode for type assurance (for example for vitest purposes).

If you follow the reproduction steps and open the example file lexical.ts locally, the lexicalImage object cannot have a property of fields as null, but as we see in the screenshot from the database at the bottom, it does.

We can also see that in the current Payload Lexical upload drawer, we have fields as null with a comment: TODO: fix this.

Image
Link to the code that reproduces this issue

https://github.com/OblikStudio/test-payload/tree/payload-lexical-null-upload-field

Reproduction Steps
  1. Clone the reproduction repo: https://github.com/OblikStudio/test-payload/tree/payload-lexical-null-upload-field
  2. pnpm docker to start the project
  3. Open http://localhost:3000/admin
  4. Create a user and log in
  5. Open http://localhost:3000/admin/collections/pages
  6. Create a new page
  7. Add an image to the Lexical Text field and fill the necessary slug field
  8. Click "Save"
  9. Open the API data: http://localhost:3000/admin/collections/pages/{ID}/api
  10. You will see that the upload has a "fields": null, prop

To see the TS error open src/lexical.ts. To fix it, you can comment out fields: null, in the object.

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

db: mongodb, plugin: richtext-lexical

Environment Info
Binaries:
  Node: 22.14.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.22.0
Relevant Packages:
  payload: 3.64.0
  next: 15.2.3
  @payloadcms/db-mongodb: 3.64.0
  @payloadcms/email-nodemailer: 3.64.0
  @payloadcms/graphql: 3.64.0
  @payloadcms/next/utilities: 3.64.0
  @payloadcms/payload-cloud: 3.64.0
  @payloadcms/richtext-lexical: 3.64.0
  @payloadcms/translations: 3.64.0
  @payloadcms/ui/shared: 3.64.0
  react: 19.2.0
  react-dom: 19.2.0

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with packages/richtext-lexical/src/features/upload/server/nodes/UploadNode.tsx and compare its SerializedUploadNode fields type with the null value used in packages/richtext-lexical/src/features/upload/client/drawer/index.tsx. Use the linked reproduction and src/lexical.ts to confirm the TypeScript error and inspect the saved API data. Done means the declared type accurately accepts the persisted upload shape and the reproduction no longer reports a type error.

Written by the indexing model from the issue text.

Assessment

Tech stack
mongodb, typescript
Domain
backend-api-design, databases
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.