Bug with tabs: tabHasName function, Cannot use 'in' operator to search for 'name' in undefined

[LostDok]

Hi! I have really strange error that hardly to reproduce. I cannot beat for a days... Need help.

Environment

Payload Version: 3.28.0
Node Version: 20.9.0
Database: MongoDB
Operating System: Ubuntu

Description

Getting a runtime error Cannot use 'in' operator to search for 'name' in undefined when editing pages (in my case) that contain blocks with nested tabs configuration. The error occurs in PayloadCMS internal code at tabHasName function.

Sometimes error occure on globals, sometimes on collections.

Error Stack Trace

Error: Cannot use 'in' operator to search for 'name' in undefined
Call Stack
tabHasName
node_modules/payload/src/fields/config/types.ts (1888:10)
fa
node_modules/@payloadcms/ui/src/graphics/Icon/index.tsx (17:11)

node_modules/@payloadcms/ui/src/elements/StepNav/SetStepNav.tsx (15:6)

Steps to Reproduce (NOT full)

1. Create a collection with tabs configuration.
2. Add blocks that contain nested tabs (tabs within blocks within tabs).
3. Try to edit a document in the admin panel.
4. Error occurs during page rendering.
5. Just working with content...

This error appear really phantomly.

I have the same on 2 different projects: 1) with pages collection; 2) with one of globals.

Expected Behavior

According to PayloadCMS types, tabs can be either NamedTab or UnnamedTab, so the name property should be optional. The configuration should work without errors.

Actual Behavior

Runtime error occurs when PayloadCMS tries to check for name property in what appears to be an undefined tab object.

Workaround

For example, I have an issue on "home" page. I find it's object in Mongo, then go to layout.{locale} and remove ANY block. After that refresh the page and everything is ok.

If I change any other data in blocks in DB it does not help. Changing the order of block objects in layout.{locale} array does not help also.

I do not know how this is even possible...

My pages collection config

import { authenticated } from "@/access/authenticated";
import { authenticatedOrPublished } from "@/access/authenticatedOrPublished";
import { PageBlocks } from "@/configs/blocks";
import getSeoTab from "@/configs/fields/seo";
import slug from "@/configs/fields/slug";
import { validateSlugDuplication } from "@/utilities/collectionsHooks";
import { generatePreviewPath } from "@/utilities/generatePreviewPath";

import { revalidateDelete, revalidatePage } from "./hooks";

import type { CollectionConfig } from "payload";

const Pages: CollectionConfig<"pages"> = {
  slug: "pages",
  access: {
    create: authenticated,
    delete: authenticated,
    read: authenticatedOrPublished,
    update: authenticated,
  },
  defaultPopulate: {
    title: true,
    slug: true,
  },
  admin: {
    defaultColumns: ["title", "slug", "_status", "updatedAt"],
    livePreview: {
      url: ({ data, req }) => {
        return generatePreviewPath({
          slug: typeof data?.slug === "string" ? data.slug : "",
          collection: "pages",
          req,
        });
      },
    },
    preview: (data, { req }) =>
      generatePreviewPath({
        slug: typeof data?.slug === "string" ? data.slug : "",
        collection: "pages",
        req,
      }),
    useAsTitle: "title",
  },
  fields: [
    {
      name: "title",
      type: "text",
      required: true,
      localized: true,
    },
    {
      type: "tabs",
      tabs: [
        {
          label: "Content",
          fields: [
            {
              name: "layout",
              type: "blocks",
              blocks: PageBlocks,
              localized: true,
              admin: {
                initCollapsed: true,
              },
            },
          ],
        },
        getSeoTab(),
      ],
    },
    {
      name: "publishedAt",
      type: "date",
      admin: {
        position: "sidebar",
      },
    },
    ...slug(),
  ],
  hooks: {
    afterChange: [revalidatePage],
    afterDelete: [revalidateDelete],
    // @ts-ignore
    beforeValidate: [validateSlugDuplication("pages")],
  },
  versions: {
    drafts: {
      autosave: {
        interval: 100, // We set this interval for optimal live preview
      },
      schedulePublish: true,
    },
    maxPerDoc: 50,
  },
};

export default Pages;

Please, help me. I am beating with this for days...

[LostDok]

I found similar topic without answer. I think it is related to my issue... #11369

[LostDok]

I found a new observation. If you create a new user and log in to the admin panel under it, go to the page where the error was, then it disappears. I don't understand how the user account can be related to this.

If you log in as the "problem" user in incognito or in another browser, the error persists.

[LostDok]

Ok. Next observation. If I go to user profile, change theme or anything that can change user preferences, error disappears. So I thing the problem is how PayloadCMS handles nested Tabs + saved UI preferences.

[cwhatley]

We are seeing a very similar issue in our installation. Nested blocks with tabs in parent and child blocks. Some users can edit fine and others get the "in operator" error.

[thompsonsj]

@LostDok you saved me hours of troubleshooting! I reset all preferences by dropping the payload-preferences collection in MongoDB.

[thompsonsj]

Did you implement your own Reset Preferences button? It's an older discussion but it seems there 'isn't a "single press of a button" option for this': #2508.

[andershermansen]

#2508 is about updating preferences when you want some defaults to update, to delete your own preferences you can go to /admin/account and press the reset preferences at the bottom. Note that this will only reset your own preferences, not the preferences of all users.

[LostDok]

[nightmareinc]

Thank you so much, your insights saved me a lot of time. In my case I had removed some tabs from my collections and even though the related migrations where generated and applied, their preferences where still in payload_preferences table, I ended up writing antoher migration to remove keys related to those tabs on those collections.