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.
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.
Payload version: 1.2.1
@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).
@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?
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.