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

discord user avatar
AlessioGr
Payload Team
10 months ago
1 2

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

  • discord user avatar
    JarrodMFlesch
    Payload Team
    10 months ago

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

  • discord user avatar
    JarrodMFlesch
    Payload Team
    9 months ago

    @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?

Open the post
Continue the discussion in GitHub
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.