Error on save when image upload is added to lexical richtext editor and HTML conversion occurs

rumbleperson commented 8 months ago

Link to reproduction

No response

Describe the Bug

When adding an upload to the lexical richtext editor and attempting to save, an error is thrown. I noticed that this only happens when there's an HTML conversion on that field.

2024-02-15 15 05 25

This is what is logged.

[14:46:16] ERROR (payload): TypeError: _payload.default.findByID is not a function
    at Object.converter (webpack-internal:///(api)/../node_modules/.pnpm/@payloadcms+richtext-lexical@0.5.2_@lexical+clipboard@0.12.6_payload@2.11.0_typescript@4.9.5_yjs@13.6.12/node_modules/@payloadcms/richtext-lexical/dist/field/features/Upload/index.js:75:83)
    at eval (webpack-internal:///(api)/../node_modules/.pnpm/@payloadcms+richtext-lexical@0.5.2_@lexical+clipboard@0.12.6_payload@2.11.0_typescript@4.9.5_yjs@13.6.12/node_modules/@payloadcms/richtext-lexical/dist/field/features/converters/html/converter/index.js:44:33)
    at Array.map (<anonymous>)
    at convertLexicalNodesToHTML (webpack-internal:///(api)/../node_modules/.pnpm/@payloadcms+richtext-lexical@0.5.2_@lexical+clipboard@0.12.6_payload@2.11.0_typescript@4.9.5_yjs@13.6.12/node_modules/@payloadcms/richtext-lexical/dist/field/features/converters/html/converter/index.js:31:54)
    at convertLexicalToHTML (webpack-internal:///(api)/../node_modules/.pnpm/@payloadcms+richtext-lexical@0.5.2_@lexical+clipboard@0.12.6_payload@2.11.0_typescript@4.9.5_yjs@13.6.12/node_modules/@payloadcms/richtext-lexical/dist/field/features/converters/html/converter/index.js:21:22)
    at hooks.afterRead (webpack-internal:///(api)/../node_modules/.pnpm/@payloadcms+richtext-lexical@0.5.2_@lexical+clipboard@0.12.6_payload@2.11.0_typescript@4.9.5_yjs@13.6.12/node_modules/@payloadcms/richtext-lexical/dist/field/features/converters/html/field/index.js:116:70)
    at eval (webpack-internal:///(api)/../node_modules/.pnpm/payload@2.11.0_@types+react@18.2.55_encoding@0.1.13_esbuild@0.18.20_typescript@4.9.5_webpack@5.90.1/node_modules/payload/dist/fields/hooks/afterRead/promise.js:153:47)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async promise (webpack-internal:///(api)/../node_modules/.pnpm/payload@2.11.0_@types+react@18.2.55_encoding@0.1.13_esbuild@0.18.20_typescript@4.9.5_webpack@5.90.1/node_modules/payload/dist/fields/hooks/afterRead/promise.js:130:13)
    at async Promise.all (index 15)
    at async afterRead (webpack-internal:///(api)/../node_modules/.pnpm/payload@2.11.0_@types+react@18.2.55_encoding@0.1.13_esbuild@0.18.20_typescript@4.9.5_webpack@5.90.1/node_modules/payload/dist/fields/hooks/afterRead/index.js:38:5)
    at async updateByID (webpack-internal:///(api)/../node_modules/.pnpm/payload@2.11.0_@types+react@18.2.55_encoding@0.1.13_esbuild@0.18.20_typescript@4.9.5_webpack@5.90.1/node_modules/payload/dist/collections/operations/updateByID.js:235:18)
    at async handler (webpack-internal:///(api)/../node_modules/.pnpm/@payloadcms+next-payload@0.1.11_@payloadcms+bundler-webpack@1.0.6_@payloadcms+db-mongodb@1.4._ao4uz74fq35abqpfxbpwt27lve/node_modules/@payloadcms/next-payload/dist/handlers/[collection]/[id].js:98:33)

To Reproduce

A description of my current setup in case any other these variables have to do with it.

Starting with the next-payload demo...

Replace package manager with pnpm
Replace the database connector from mongo to postgres
Replace aws storage with google cloud storage
Replace the richtext editor from slate to lexical

Add HTML Converter Feature to Lexical Editor config

export default buildConfig({
...
editor: lexicalEditor({
  features: ({ defaultFeatures }) => [
    ...defaultFeatures,
    HTMLConverterFeature({}),
  ],
}),
...
});

Add HTML field for existing richtext field

import { lexicalHTML } from "@payloadcms/richtext-lexical";
import type { GlobalConfig } from "payload/types";
...

const Settings: GlobalConfig = {
...
fields: [
  {
    type: "tabs",
    tabs: [
      ...
      {
        label: "Footer",
        name: "footer",
        fields: [
          ...
          {
            name: "contact",
            label: "Contact Information",
            type: "richText",
          },
          lexicalHTML("contact", { name: "contact_html" }),
          ...
        ],
      },
    ],
  },
],
};

export default Settings;

Payload Version

next-payload@0.1.11 payload@2.11.0

Adapters and Plugins

@payloadcms/richtext-lexical@0.5.2 @payloadcms/plugin-cloud-storage@1.1.2 @payloadcms/db-postgres@0.1.13

otomir23 commented 8 months ago

Same issue, and it's reproducible without plugin-cloud-storage

otomir23 commented 7 months ago

Any updates on this?

AlessioGr commented 6 months ago

Hey @otomir23 , this might be related specifically to the next-payload repo, which won't be receiving any new fixes. Could you test if you can reproduce it on the latest version of payload, outside of next-payload, or inside of payload 3.0 beta?

AlessioGr commented 5 months ago

Closing this, as this issue is likely specific to next-payload and we're not supporting that anymore. If this issue happens within payload 3.0, please open a new one!

github-actions[bot] commented 1 month ago

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

payloadcms / payload