Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

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

discord user avatar
alessiogr
2 years ago
16

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
    2 years ago
    @360823574644129795

    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

  • discord user avatar
    alessiogr
    2 years 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
    2 years 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?

  • discord user avatar
    alessiogr
    2 years 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)

  • discord user avatar
    jacobsfletch
    2 years 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.

  • discord user avatar
    alessiogr
    2 years 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
    2 years ago
    lexicalRichTextEditor

    where is this field?

  • discord user avatar
    alessiogr
    2 years 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
    2 years ago

    is that from this?

  • discord user avatar
    alessiogr
    2 years ago

    Where are you seeing

    lexicalRichTextEditor

    ?

  • discord user avatar
    jacobsfletch
    2 years ago

    From the Payload error message



    Collection "lexical-rich-text" > Field "lexicalRichTextEditor" > "value" does not match any of the allowed types
  • discord user avatar
    alessiogr
    2 years 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
  • discord user avatar
    jacobsfletch
    2 years ago

    Yup that was it



    Just to confirm, if you remove the field's

    afterRead

    hook, does it pass validation?

  • discord user avatar
    alessiogr
    2 years 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_n2 years ago

    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.



  • discord user avatar
    jacobsfletch
    2 years ago

    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.

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.