Using lexicalRichTextField in a Payload field type 'array' causing undefined reading 'type' properties error #44
Description
It seems that Lexical loads up fine if it's at the starting/root level of the fields property in a CollectionConfig, but using lexicalRichTextField() as a sub-element in a field of type array causes the following error to appear on screen:
Cannot read properties of undefined (reading 'type')
In Developer Tools console, the following error appears:
Uncaught TypeError: Cannot read properties of undefined (reading 'type')
at $parseSerializedNodeImpl (Lexical.dev.js:7526:1)
at parseEditorState (Lexical.dev.js:7577:1)
at LexicalEditor.parseEditorState (Lexical.dev.js:10791:1)
at initializeEditor (LexicalComposer.dev.js:106:1)
at LexicalComposer.dev.js:66:1
at mountMemo (react-dom.development.js:17225:1)
at Object.useMemo (react-dom.development.js:17670:1)
at Object.useMemo (react.development.js:1650:1)
at LexicalComposer (LexicalComposer.dev.js:46:1)
at renderWithHooks (react-dom.development.js:16305:1)
For example, using lexicalRichTextField() as such, works OK:
const Posts: CollectionConfig = {
slug: 'posts',
fields: [
{
name: 'title',
type: 'text',
required: true,
},
lexicalRichTextField({
name: 'content',
label: 'Content',
}),
]
};
... but doing the following causes the error:
const Posts: CollectionConfig = {
slug: 'posts',
fields: [
{
name: 'title',
type: 'text',
required: true,
},
{
name: 'columns',
type: 'array',
minRows: 1,
maxRows: 2,
labels: {
singular: 'Column',
plural: 'Columns',
},
fields: [
lexicalRichTextField({
name: 'content',
label: 'Content',
}),
],
},
]
};
(I've edited this comment to add some code examples).