Error - value does not match any of the allowed types - for field hook
I'm using following field hook:
type LexicalRichTextFieldAfterReadFieldHook = FieldHook<any, SerializedEditorState, any>;
export const populateLexicalRelationships: LexicalRichTextFieldAfterReadFieldHook = async ({ value, req }): Promise<SerializedEditorState> => {
if(value.root.children){
const newChildren = [];
for(let childNode of value.root.children){
newChildren.push(await traverseLexicalField(childNode, req.locale));
}
value.root.children = newChildren;
}
return value;
};as the afterRead: in my collection:
function lexicalRichTextField(props: {name?: string, label?: string, plugins?}): Field {
const {name, label, plugins} = props;
return {
name: name ? name : 'richText',
type: 'richText',
label: label ? label : 'Rich Text',
hooks: {
afterRead: [
populateLexicalRelationships
]
},
admin: {
components: {
Field: LexicalRichTextField,
Cell: LexicalRichTextCell
}
}
}
}No matter what types I use, I get the following error when building (not during run dev):
[19:36:10] ERROR (payload): There were 1 errors validating your Payload config
[19:36:10] ERROR (payload): 1: Collection "lexical-rich-text" > Field "lexicalRichTextEditor" > "value" does not match any of the allowed typesWhy?
I also cannot find that error in the source code anywhere, so I have no idea where it's even coming from (when searching for "does not match any of the allowed types")
Turned into a bug report:
https://github.com/payloadcms/payload/issues/1518
@Alessio 🍣 what is
SerializedEditorState? Sounds like that needs to be
RichTexttype instead.
In other words,
RichTextshould be the return type of the
populateLexicalRelationshipshook
SerializedEditorStateis just the json value of what's in the richtext editor (so it contains all the nodes)! Meaning I import & export the
SerializedEditorStatein/from the editor. Shouldn't that work?
Note that, even with simple types like string, it doesn't work. I think the main problem is, that this field hook is broken if you import it from another file, as it works perfectly if it's in the same file
The validation error you are seeing is because there is an inconsistency between your
richTextfield and the type of value Payload expects to receive for it. While
SerializedEditorStatemight be the same
shape, it might not be explicitly typed according to the Payload config validator.
If you hover
SerializedEditorStatein your IDE what is the type?
- What type should I then use, which would work with the richText field type validator, as well as Lexical's editor?
- If that's the case, I think the bug is still the valid. Because the behaviour of the validator (= the error it throws) should be consistent - no matter if you import the hook, or if the hook is in the same file. As currently, it doesn't throw any error if it's in the same file.
SerializedEditorState would be this (it's a type from Lexical)
(+ all custom attributes)
To make them compatible with each other you need to "adapt" the data on each side, which you are already doing I see by diving into
root, looping over
children, and pushing into
value. But I'm pretty sure the problem is still the
return type.
SerializedEditorStateis not known to Payload, but your hook is returning it.
hmm what do you mean with adapt the data on each side? You mean converting from lexical's editor state => slate editor state back and forth?
What about maybe, adding a functionality to the core to skip that check, or add your own custom data type there (like SerializedEditorState?) As SerializedEditorState would really be the most proper way to handle lexical's data.
I could then just "abuse" that bug which ignores the validator until it's added
lexicalRichTextEditorwhere is this field?
To make them compatible with each other you need to "adapt" the data on each side, which you are already doing I see by diving into root, looping over children , and pushing into value
Also that's actually done to populate upload & link relationships in the editor. Didn't take adapting the data to slate into consideration at all there :p
is that from this?
Where are you seeing
lexicalRichTextEditor?
From the Payload error message
Collection "lexical-rich-text" > Field "lexicalRichTextEditor" > "value" does not match any of the allowed types
ohhh that's in the collection where I'm using the lexical rich text editor field
(the name I gave to the field)
https://github.com/AlessioGr/payload-plugin-lexical/blob/master/demo/src/collections/Lexical.ts
Yup that was it
Just to confirm, if you remove the field's
afterReadhook, does it pass validation?
Yep it does! There are two ways to make it pass validation:
A) Just remove the afterRead hook
B) Move the hook passed in the afterRead hook (so
populateLexicalRelationships) into the same file, rather than importing it (= the bug)
hey, I seem to be getting the same error, but none of the 2 points mentioned above can fix the issue.
ERROR (payload): 1: Collection "page" > Field "content" > "value" does not match any of the allowed types
Not even sure where the error is happening. There's no "value" anywhere in my page collection.
That error appears to be pointing to your content field which likely has a misformatted config. You should remove each block in that field one-by-one to until the error is gone, this will help you narrow the origin of the issue so you can come up with a fix.
Continue the discussion in Discord
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.