Please correct invalid fields error

blupandaman

last month

Just upgraded to payload 1.12.0 and am now getting an invalid fields error even though I have all the required fields filled out and payload can't show where the error is.

It is happening in a custom block I made that holds an array of elements (a title, rich text content, text for a button label and link, and a checkbox... nothing crazy).

The second screen shot shows the same block being used on a different page with no errors. Key difference between the two is the the block already existed on the other page. I was getting the error when trying to create a new instance of the block.

Bumping the version down to 1.11.8 fixes the issue for me. Hesitant to mark as solved though.

alessiogr
Payload Team
last month
That's a dark red flag. I have a feeling it might then be related to
https://github.com/payloadcms/payload/pull/3110
. @jarrod_not_jared could you check this out?

@blupandaman In the meantime, it would be amazing if you can share your collection config, or even better, a reproduction ^^
jarrod_not_jared
Payload Team
last month
@blupandaman when you say "custom block" what do you mean exactly?

Also can you send over a snippet of your blocks field config? I am unable to recreate, but thinking I
might
need some more info first?

blupandaman

last month

@alessiogr @jarrod_not_jared This is the block that I am currently working with. I also haven't been able to sucessfully recreate the problem, but if I upgrade to 1.12.0, I can not save any new versions of this block. I will keep trying to reproduce.

import { Block } from "payload/types";

export const CollapsibleInfoMenu: Block = {
  slug: "collapsibleInfoMenu",
  labels: {
    singular: "Collapsible Info Menu",
    plural: "Collapsible Info Menu Blocks",
  },
  interfaceName: "CollapsibleInfoMenuBlock",
  fields: [
    {
      name: "menuTitle",
      type: "text",
    },
    {
      name: "items",
      type: "array",
      maxRows: 8,
      fields: [
        {
          name: "title",
          type: "text",
          required: true,
        },
        {
          name: "content",
          type: "richText",
          admin: {
            leaves: ["bold", "italic", "underline"],
            elements: [],
            hideGutter: true,
          },
          // TODO: Maybe make a richtext field for the config I use often
        },
        {
          type: "row",
          fields: [
            {
              name: "buttonLabel",
              type: "text",
              admin: {
                description:
                  "Addes a button inside the item content (ex. More Info)",
              },
            },
            {
              name: "buttonLink",
              type: "text",
            },
          ],
        },
        {
          name: "openLinkInNewTab",
          type: "checkbox",
        },
      ],
    },
  ],
};

It's just a block that I am using in a page layout

jarrod_not_jared
Payload Team
last month
sure sure, I just want to clarify, if you create a new document and add this block, it breaks?
blupandaman
last month
It can be a new or existing document. It's just when I try to add the block to it if the block wasn't there previously
jarrod_not_jared
Payload Team
last month
ok perfect, I will atttempt to recreate rn
blupandaman
last month
I just tried from a new payload instance, adding my pages collection config and that collapsible menu block and found no issue.

I will keep testing and let you know if I find anything that could explain it
jarrod_not_jared
Payload Team
last month
interesting! Could you compare the data shapes in the DB for me?
blupandaman
last month
I have a bunch of hooks and access controls as well, but I disabled those and still same issue, so it's not any of that
jarrod_not_jared
Payload Team
last month
I just installed
1.11.8
added data, then installed latest and could not recreate the issue, hmmm
blupandaman
last month
From my recreated test that works just fine

This is from the instance that is having the issue (while on 1.18.0)

As soon as I update it to the latest version I cannot add a new instance of that block

Oh but I can duplicate it! This might be where the issue lies?
jarrod_not_jared
Payload Team
last month
nothing stands out to me as to what would be causing you issues here 🤔

I am able to do everything you are
wanting
to do. I wonder what field it thinks there is an error on
blupandaman
last month
Could it be the richtext?

I'll try removing fields to see which one could be causing it
jarrod_not_jared
Payload Team
last month
Can you clarify what versions you are / are not having issues with?
blupandaman
last month
I have no issues on
1.11.8
or earlier. I have the issue on
1.12.0

Ok I found the specific problem

I can't seem to reproduce it still, but if the name for the array is "items" then I cannot create a new instance of the block

If I cange it to anything else like "testItems" for example. Everything works no problem
jarrod_not_jared
Payload Team
last month
do you have another field in this config with the name
items
?
blupandaman
last month
There's no conflicts from what I can see with the object name of "items" so I honestly have no clue... Seems to only be an issue for me though and I will just change the name 🤷‍♂️
jarrod_not_jared
Payload Team
last month
I don't really want to write it off, something seems up. Can you send this whole collection config over?
blupandaman
last month
If I duplicate it, then I can have multiple "items" objects. Very odd
jarrod_not_jared
Payload Team
last month
I think that makes sense? You are duplicating the block right?
blupandaman
last month
First: Original block created on
1.11.8
Second: Duplicate of the first on
1.12.0
Third: New instance on
1.12.0

Oh I guess I can't paste something that long. Should I send the file?

This is the entire pages collection config (using a multitenant structure)
message.txt
index.ts
jarrod_not_jared
Payload Team
last month
What you gave me is good, thanks!

ok question, if you comment out all blocks except for this one, does the error persist?
blupandaman
last month
Stranger yet. It actually removes the items from the array

Before commenting

After
jarrod_not_jared
Payload Team
last month
I think that might just be because the index of the block changes because the other blocks are now "gone"

but can you add items? Maybe just create a new doc to test with

blupandaman

last month

It works if that is the only block 👍

I will see if there's a block that causes the issue

Ok found something

This block is what causes the error. It is a copy of the other block that I am trying to use.

import { Block } from "payload/types";

export const AccordionList: Block = {
  slug: "accordionList",
  labels: {
    singular: "Accordion List",
    plural: "Accordion List Blocks",
  },
  interfaceName: "AccordionListBlock",
  fields: [
    {
      name: "items",
      type: "array",
      admin: {
        components: {
          RowLabel: ({ data }) => {
            if (!data?.label || data.label === "") return null;
            return data.label.length < 50
              ? data?.label
              : data?.label.slice(0, 50) + "...";
          },
        },
      },
      fields: [
        {
          name: "label",
          type: "text",
          required: true,
        },
        {
          name: "content",
          type: "richText",
          admin: {
            leaves: ["bold", "italic", "underline"],
            elements: ["ol", "ul", "link"],
            hideGutter: true,
          },
          // TODO: Maybe make a richtext field for the config I use often
        },
        {
          type: "row",
          fields: [
            {
              name: "buttonLabel",
              type: "text",
              admin: {
                description:
                  "Addes a button inside the item content (ex. More Info)",
              },
            },
            {
              name: "buttonLink",
              type: "text",
            },
          ],
        },
        {
          name: "openLinkInNewTab",
          type: "checkbox",
        },
      ],
    },
  ],
};

It doesn't work if:

- If I change just the name of a field

It does work if:

- I change the name of the array field ("items") in either block

- Remove a field (change the structure) from one of the fields in the array field

jarrod_not_jared

Payload Team

last month

can you help me create a minimal repro of this? I am thinking 2 blocks, different slugs, each with 1 array field using the same field name for the array field

items

I am trying to do this, but not sure what I am missing to break it

here was my attempt

export const PostsCollection: CollectionConfig = {
  slug: 'posts',
  fields: [
    {
      type: 'tabs',
      label: 'Tabs',
      tabs: [{
        label: 'Tab 1',
        fields: [
          {
            type: 'blocks',
            name: 'layout',
            blocks: [{
              slug: 'block-1',
              fields: [
                {
                  type: 'array',
                  name: 'items',
                  fields: [
                    {
                      type: 'text',
                      name: 'title',
                      required: true,
                    },
                  ],
                },
              ],
            },
            {
              slug: 'block-2',
              fields: [
                {
                  type: 'array',
                  name: 'items',
                  fields: [
                    {
                      type: 'text',
                      name: 'title',
                      required: true,
                    },
                  ],
                },
              ],
            }],
          },
        ],
      }],
    },
  ],
};

blupandaman
last month
That's exactly along the lines of what I tried. I will see what happens if I use the exact block configs that I am using

jarrod_not_jared

Payload Team

last month

omg I got the error to surface 🎉

thank you for hanging in there with me, I will look into fixing this today

heres the config I used to get it to surface

export const Test: CollectionConfig = {
  slug: 'test',
  fields: [
    {
      type: 'tabs',
      label: 'Tabs',
      tabs: [{
        label: 'Tab 1',
        fields: [
          {
            type: 'blocks',
            name: 'layout',
            blocks: [{
              slug: 'block-1',
              fields: [
                {
                  type: 'array',
                  name: 'items',
                  fields: [
                    {
                      type: 'text',
                      name: 'title',
                      required: true,
                    },
                  ],
                },
              ],
            },
            {
              slug: 'block-2',
              fields: [
                {
                  type: 'array',
                  name: 'items',
                  fields: [
                    {
                      type: 'text',
                      name: 'title2',
                      required: true,
                    },
                  ],
                },
              ],
            }],
          },
        ],
      }],
    },
  ],
};

the key was using the same top level array field name, but changing the child required field name

blupandaman
last month
Aww yes that matches my problem exactly! Either changing the top level array field name or making the child required field names the same fixes the issue
jarrod_not_jared
Payload Team
last month
what a barn burner. PR is out for this issue, I will look over the PR again later tonight or tomorrow morning. But the issue is resolved, thank you for bringing this to our attention!

https://github.com/payloadcms/payload/pull/3140
blupandaman
last month
Glad I could help!
jarrod_not_jared
Payload Team
last month
oh @blupandaman this has been merged and is resolved in the latest release
blupandaman
last month
Appreciate it! Thanks
ssyberg
2 weeks ago
I don't know if it's related but I'm seeing very similar behavior on 1.15.4... I've spent a couple hours trying to debug this, but the most crazy making part of it is not being able to see what is throwing a validation error. Is there any debugging we can turn on to make this more explicit in the console? I've verified it's not server side failing validation, but I have no idea what it is.

I do have a lot of hidden fields, wondering if that is related, but again no idea how to identify this.
jarrod_not_jared
Payload Team
2 weeks ago
@ssyberg can you recreate your issue with a minimal amount of data? Would love to help!

As for debugging, I’m not sure if there is an easy way to debug but certainly something to think about. I am normally working with payload linked so I just add console logs in form state and so on
ssyberg
last week
Turns out this was the custom color field having a validation issue and not showing anything. We copied it from the color field blog post and I think it was working up until recently.

Perhaps this is just out of date?
https://payloadcms.com/blog/building-a-custom-field

Open the post

Continue the discussion in Discord

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.