Please correct invalid fields error

default discord avatar
blupandaman
last month
36

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.

  • discord user avatar
    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 ^^

  • discord user avatar
    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?

  • default discord avatar
    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

  • discord user avatar
    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?

  • default discord avatar
    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

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    ok perfect, I will atttempt to recreate rn

  • default discord avatar
    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

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    interesting! Could you compare the data shapes in the DB for me?

  • default discord avatar
    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

  • discord user avatar
    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

  • default discord avatar
    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?

    image.png
    image.png
    image.png
    image.png
  • discord user avatar
    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

  • default discord avatar
    blupandaman
    last month

    Could it be the richtext?



    I'll try removing fields to see which one could be causing it

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    Can you clarify what versions you are / are not having issues with?

  • default discord avatar
    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





    image.png
    image.png
    image.png
  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    do you have another field in this config with the name

    items

    ?

  • default discord avatar
    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 šŸ¤·ā€ā™‚ļø

    image.png
  • discord user avatar
    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?

  • default discord avatar
    blupandaman
    last month

    If I duplicate it, then I can have multiple "items" objects. Very odd

    image.png
  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    I think that makes sense? You are duplicating the block right?

  • default discord avatar
    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)

  • discord user avatar
    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?

  • default discord avatar
    blupandaman
    last month

    Stranger yet. It actually removes the items from the array



    Before commenting



    After

    image.png
    image.png
  • discord user avatar
    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

  • default discord avatar
    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

  • discord user avatar
    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,
                        },
                      ],
                    },
                  ],
                }],
              },
            ],
          }],
        },
      ],
    };
  • default discord avatar
    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

  • discord user avatar
    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

  • default discord avatar
    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

  • discord user avatar
    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
  • default discord avatar
    blupandaman
    last month

    Glad I could help!

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    oh @blupandaman this has been merged and is resolved in the latest release

  • default discord avatar
    blupandaman
    last month

    Appreciate it! Thanks

  • default discord avatar
    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.

  • discord user avatar
    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

  • default discord avatar
    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.