Error - value does not match any of the allowed types - for field hook

default discord avatar
Alessio 🍣
6 months ago
29

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 types

Why?


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
  • discord user avatar
    jacobsfletch
    Payload Team
    6 months ago

    @Alessio 🍣 what is

    SerializedEditorState

    ? Sounds like that needs to be

    RichText

    type instead.



    In other words,

    RichText

    should be the return type of the

    populateLexicalRelationships

    hook

  • default discord avatar
    Alessio 🍣
    6 months ago
    SerializedEditorState

    is just the json value of what's in the richtext editor (so it contains all the nodes)! Meaning I import & export the

    SerializedEditorState

    in/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

  • discord user avatar
    jacobsfletch
    Payload Team
    6 months ago

    The validation error you are seeing is because there is an inconsistency between your

    richText

    field and the type of value Payload expects to receive for it. While

    SerializedEditorState

    might be the same

    shape

    , it might not be explicitly typed according to the Payload config validator.



    If you hover

    SerializedEditorState

    in your IDE what is the type?

  • default discord avatar
    Alessio 🍣
    6 months ago

    - 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)

    image.png
    image.png
    image.png
    image.png
  • discord user avatar
    jacobsfletch
    Payload Team
    6 months ago

    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

    .

    SerializedEditorState

    is not known to Payload, but your hook is returning it.

  • default discord avatar
    Alessio 🍣
    6 months ago

    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

  • discord user avatar
    jacobsfletch
    Payload Team
    6 months ago
    lexicalRichTextEditor

    where is this field?

  • default discord avatar
    Alessio 🍣
    6 months ago
    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

  • discord user avatar
    jacobsfletch
    Payload Team
    6 months ago

    is that from this?

    Screenshot_2022-11-28_at_11.32.05_AM.jpg
  • default discord avatar
    Alessio 🍣
    6 months ago

    Where are you seeing

    lexicalRichTextEditor

    ?

  • discord user avatar
    jacobsfletch
    Payload Team
    6 months ago

    From the Payload error message



    Collection "lexical-rich-text" > Field "lexicalRichTextEditor" > "value" does not match any of the allowed types
  • default discord avatar
    Alessio 🍣
    6 months ago

    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
    image.png
  • discord user avatar
    jacobsfletch
    Payload Team
    6 months ago

    Yup that was it



    Just to confirm, if you remove the field's

    afterRead

    hook, does it pass validation?

  • default discord avatar
    Alessio 🍣
    6 months ago

    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)

  • default discord avatar
    room_n
    last month

    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.



    Screenshot_2023-04-18_at_13.02.26.png
  • discord user avatar
    jacobsfletch
    Payload Team
    last month

    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.

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.