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?