payloadcms / payloadcms/payload
Lexical Upload node `fields` prop type not matching database
Nobody has claimed this yet.
- 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.
Link to the code that reproduces this issue
https://github.com/OblikStudio/test-payload/tree/payload-lexical-null-upload-field
Reproduction Steps
- Clone the reproduction repo: https://github.com/OblikStudio/test-payload/tree/payload-lexical-null-upload-field
pnpm dockerto start the project- Open http://localhost:3000/admin
- Create a user and log in
- Open http://localhost:3000/admin/collections/pages
- Create a new page
- Add an image to the Lexical Text field and fill the necessary slug field
- Click "Save"
- Open the API data: http://localhost:3000/admin/collections/pages/{ID}/api
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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