Broken type checking for field hooks: "value" does not match any of the allowed types

[AlessioGr]

Bug Report

I'm getting the error "value" does not match any of the allowed types building my project when I use a field hook which is exported in another file. If I move the exact same field hook to the file where the hooks are declared, I get no error.

Steps to Reproduce

Two files:

LexicalRichTextField.ts

import {Field, FieldHook} from 'payload/types';
import {LexicalRichTextField, LexicalRichTextCell, traverseLexicalField, populateLexicalRelationships2} from './LexicalRichText'
import {SerializedEditorState} from "lexical";

type LexicalRichTextFieldAfterReadFieldHook = FieldHook<any, SerializedEditorState, any>;

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, ""));
                }
                value.root.children = newChildren;
            }

            return value;
        };

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: [
                populateLexicalRelationships2,
            ],
        },
        admin: {
            components: {
                Field: LexicalRichTextField,
                Cell: LexicalRichTextCell
            }
        }
    }
}

export default lexicalRichTextField;

LexicalRichText/index.tsx:

import React, { Suspense } from 'react';
import {$getRoot, EditorState, LexicalEditor, SerializedEditorState, SerializedLexicalNode} from 'lexical';
import { Props } from './types';
import { LexicalEditorComponent } from './LexicalEditorComponent';

import './index.scss';
import Loading from 'payload/dist/admin/components/elements/Loading'

const baseClass = 'lexicalRichTextEditor';

import { useField } from "payload/components/forms";
import PlaygroundNodes from "./nodes/PlaygroundNodes";
import PlaygroundEditorTheme from "./themes/PlaygroundEditorTheme";
import {createHeadlessEditor} from "@lexical/headless";
import {ExtraAttributes, RawImagePayload} from "./nodes/ImageNode";
import payload from "payload";
import {FieldHook} from "payload/types";

type LexicalRichTextFieldAfterReadFieldHook = FieldHook<any, SerializedEditorState, any>;

export const populateLexicalRelationships2: LexicalRichTextFieldAfterReadFieldHook = async ({value, req}): Promise<SerializedEditorState> =>  {
    if(value.root.children){
        const newChildren = [];
        for(let childNode of value.root.children){
            newChildren.push(await traverseLexicalField(childNode, ""));
        }
        value.root.children = newChildren;
    }

    return value;
};

export async function traverseLexicalField(node: SerializedLexicalNode, locale: string): Promise<SerializedLexicalNode> {
    ...
}
async function loadUploadData(rawImagePayload: RawImagePayload, locale: string) {
...
}

async function loadInternalLinkDocData(value: string, relationTo: string, locale: string) { //TODO: Adjustable depth
...
}

export const LexicalRichTextCell: React.FC<any> = (props) => {
    ...
};

export const LexicalRichTextField: React.FC<Props> = (props) => {
   ...
}
const LexicalRichText2: React.FC<Props> = (props: Props) => {
   ...
};

Inside LexicalRichTextField.ts, when I use

 afterRead: [
                populateLexicalRelationships2,
            ],

I'm getting the following error when running yarn build (works in dev):

[01:00:16] ERROR (payload): There were 1 errors validating your Payload config
[01:00:16] ERROR (payload): 1: Collection "lexical-rich-text" > Field "lexicalRichTextEditor" > "value" does not match any of the allowed types

When I use

 afterRead: [
                populateLexicalRelationships,
            ],

It's working just fine.

Other Details

Payload version: 1.2.1

[JarrodMFlesch]

@AlessioGr I took a look at your plugin, and was able to recreate the issue by building the plugin, then attempting to build the demo. I don't think this is a bug with payload though, if you rename /src/fields/LexicalRichText/index.tsx to /src/fields/LexicalRichText/anythingElse.tsx, after clearing dist, rebuilding both the plugin then the demo, you will not get that error (you will get other eslint errors, unrelated to this issue).

[JarrodMFlesch]

@AlessioGr I am going to convert this to a discussion - I was able to reproduce your issue, but I am unsure why the filename is the issue and I do not think it is specific to Payload. I am going to convert this to a discussion, if you have any more info let's chat about it there.

If needed we can re-open this issue. Sound good?

[jankocian]

I'm migrating Payload 1.0 into 2.0 and was facing plenty of these "value" does not match any of the allowed types errors because of Slate editor misconfiguration (using the old admin props).

It is super misleading! Catching unrelated errors it is not supposed to. Please fix this issue, it makes basic troubleshooting pain in the... Thx 🙏

[TechSynthesis]

did you find a solution to this ?

[jankocian]

@TechSynthesis in my case it was just about proper migration to the new richtext field syntax. See https://github.com/payloadcms/payload/releases/tag/v2.0.0 – "Rich text admin properties have moved".