Get a peek at our latest innovations at Sanity Product Day on Dec 8th →

Stack Trace: TypeError: Cannot Read Properties of Undefined (Reading 'Name')

10 replies
Last updated: Apr 14, 2022

I've inherited a project and running into an issue when attempting to create a new document. I get the following error message:

TypeError: Cannot read properties of undefined (reading 'name')
. This is only happening when creating a new document of this type, but not when opening existing documents. I've even commented out most of the fields except for title & slug, and the issue is persistent
Stack Trace:

TypeError: Cannot read properties of undefined (reading 'name')
    at resolveEnabledActions (/static/js/app.bundle.js:89193:70)
    at isActionEnabled (/static/js/app.bundle.js:89197:47)
    at resolveDocumentActions (/static/js/app.bundle.js:554716:52)
    at <http://localhost:3333/static/js/app.bundle.js:554446:77>
    at mountMemo (/static/js/vendor.bundle.js:18255:19)
    at Object.useMemo (/static/js/vendor.bundle.js:18551:16)
    at useMemo (/static/js/vendor.bundle.js:2408:21)
    at <http://localhost:3333/static/js/app.bundle.js:554446:36>
    at renderWithHooks (/static/js/vendor.bundle.js:17616:18)
    at updateFunctionComponent (/static/js/vendor.bundle.js:19847:20)
Component Stack:

in StructureError (created by DeskToolRoot)
    in DeskToolRoot (created by RenderTool)
    in ErrorBoundary (created by RenderTool)
    in RenderTool (created by SchemaErrorReporter)
    in RouteScope (created by SchemaErrorReporter)
    in div (created by styled.div)
    in styled.div (created by ForwardRef(Box))
    in ForwardRef(Box) (created by Styled(Component))
    in Styled(Component) (created by ForwardRef(Flex))
    in ForwardRef(Flex) (created by Styled(Component))
    in Styled(Component) (created by SchemaErrorReporter)
    in div (created by styled.div)
    in styled.div (created by ForwardRef(Box))
    in ForwardRef(Box) (created by Styled(Component))
    in Styled(Component) (created by ForwardRef(Flex))
    in ForwardRef(Flex) (created by Styled(Component))
    in Styled(Component) (created by SchemaErrorReporter)
    in div (created by styled.div)
    in styled.div (created by ForwardRef(Box))
    in ForwardRef(Box) (created by Styled(Component))
    in Styled(Component) (created by ForwardRef(Flex))
    in ForwardRef(Flex) (created by Styled(Component))
    in Styled(Component) (created by SchemaErrorReporter)
    in SchemaErrorReporter (created by DefaultLayout)
    in DefaultLayout (created by DefaultLayoutRoot)
    in RouterProvider (created by DefaultLayoutRoot)
    in LoginWrapper (created by NormalizedLoginWrapper)
    in NormalizedLoginWrapper (created by DefaultLayoutRoot)
    in DefaultLayoutRoot (created by AppProvider)
    in div (created by styled.div)
    in styled.div (created by ForwardRef(Box))
    in ForwardRef(Box) (created by Styled(Component))
    in Styled(Component) (created by ForwardRef(Card))
    in Fe (created by ThemeProvider)
    in ThemeProvider (created by ThemeColorProvider)
    in ThemeColorProvider (created by ForwardRef(Card))
    in ForwardRef(Card) (created by Styled(Component))
    in Styled(Component) (created by AppProvider)
    in SnackbarProvider (created by AppProvider)
    in ToastProvider (created by AppProvider)
    in LayerProvider (created by AppProvider)
    in PortalProvider (created by AppProvider)
    in UserColorManagerProvider (created by AppProvider)
    in AppProvider (created by SanityRoot)
    in Fe (created by ThemeProvider)
    in ThemeProvider (created by SanityRoot)
    in ZIndexProvider (created by SanityRoot)
    in SanityRoot
    in AppContainer

Apr 13, 2022, 6:47 PM

user U
Hi Julia!
This is the structure builder for it:


export const ProductsMenuItem = S.listItem()
  .title("Products")
  .icon(BsTag)
  .child(
    S.list()
      .title("Products")
      .items([
        S.listItem()
          .title("Products")
          .schemaType("product")
          .child(
            S.documentTypeList("product")
              .title("Products")
              .child((documentId) =&gt;
                S.document()
                  .documentId(documentId)
                  .views([
                    S.view.form().icon(FiEdit),
                    S.view
                      .component(IframePreview)
                      .options({ previewURL })
                      .title("Web Preview")
                      .icon(BsEye),
                  ])
              )
          )
          .icon(BsTag),
        S.listItem()
          .title("Collections")
          .schemaType("collection")
          .child(
            S.documentTypeList("collection")
              .title("Collections")
              .child((documentId) =&gt; S.document().documentId(documentId))
          )
          .icon(BsGrid),
        S.listItem()
          .title("Categories")
          .schemaType("category")
          .child(
            S.documentTypeList("category")
              .title("Categories")
              .child((documentId) =&gt; S.document().documentId(documentId))
          )
          .icon(BsCardList),
        S.listItem()
          .title("Shared Product Copy")
          .schemaType("productCopy")
          .child(
            S.documentTypeList("productCopy")
              .title("Shared Product Copy")
              .child((documentId) =&gt; S.document().documentId(documentId))
          )
          .icon(BsCollection),
      ])
  );
and this is the schema:


export default {
  name: "collection",
  title: "Product Collection",
  type: "document",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "content.main.title",
        maxLength: 96,
      },
      validation: (Rule) =&gt; Rule.required(),
    },
    {
      name: "illustration",
      title: "Illustration",
      type: "figure",
    },
    {
      name: "madeIn",
      title: "Made in ...",
      type: "string",
    },
    {
      name: "description",
      title: "Description",
      type: "text",
      rows: 3,
    },
    {
      name: "products",
      title: "Products",
      type: "array",
      of: [
        {
          type: "reference",
          to: [{ type: "product" }],
        },
      ],
    },
  ],
  preview: {
    select: {
      title: "title",
      media: "illustration",
    },
  },
};

Apr 13, 2022, 7:20 PM

hmm ok, I removed your custom types and refs. The schema seems ok.

export default {
  name: "collection",
  title: "Product Collection",
  type: "document",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        // source: "content.main.title",
        source: "title",
        maxLength: 96,
      },
      validation: (Rule) =&gt; Rule.required(),
    },
    // {
    //   name: "illustration",
    //   title: "Illustration",
    //   type: "figure",
    // },
    {
      name: "madeIn",
      title: "Made in ...",
      type: "string",
    },
    {
      name: "description",
      title: "Description",
      type: "text",
      rows: 3,
    },
  //   {
  //     name: "products",
  //     title: "Products",
  //     type: "array",
  //     of: [
  //       {
  //         type: "reference",
  //         to: [{ type: "product" }],
  //       },
  //     ],
  //   },
  ],
  // preview: {
  //   select: {
  //     title: "title",
  //     media: "illustration",
  //   },
  // },
}

Apr 13, 2022, 8:09 PM

Hmmm, I commented everything out except for the title &amp; slug and still ran into the issue... I'll keep checking

Apr 13, 2022, 8:14 PM

user U
yeah... same issue 🤔

Apr 13, 2022, 8:17 PM

I still feel like a noob with structure builder. Good practice op!
this
should just list document titles for collection type docs under the parent…

S.listItem()
          .title("Collections")
          .schemaType("collection")
          .child(
            S.documentTypeList("collection")
              .title("Collections")
              .child((documentId) =&gt; S.document().documentId(documentId))
          )
          .icon(BsGrid),
I may suggest trying to isolate what part of the
structure builder is causing issues. Try removing the structure builder in a test branch. This should just render each doc type and then you can make sure that your references and custom objects/types all work as intended. Maybe someone else can see something in your structure -vs- schema that I’m not. I’m building something kinda similar too and will circle back if any 💡 go off.
remove the builder part from
./sanity.json
to test similar to this:
"parts": [
    {
      "name": "part:@sanity/base/schema",
      "path": "./schemas/schema.js"
    },
    // - {
    // -   "name": "part:@sanity/desk-tool/structure",
    // -   "path": "./deskStructure.js"
    // - }
  ]

Apr 13, 2022, 8:18 PM

Looks like a pretty complex structure too… I’d definitely try isolating that at a very high level first with your full typical schema. And if the error still happens with structure builder removed - you’d be certain it’s an issue with referenced documents or objects.

Apr 13, 2022, 8:22 PM

it may also be good to check if custom document actions are being used - this could be another break point that can cause a relatively generic error like this

Apr 13, 2022, 8:24 PM

along with all this, don’t forget typical node troubleshooting - deleting modules, possibly also deleting the lock file - rebuilding

Apr 13, 2022, 8:26 PM

user U
thanks for the note on the structure. I inherited this project and it seems some of the syntax might have been out of date. Refactored and all is back to normal! Thanks

Apr 14, 2022, 3:33 PM

omg awesome, I feel your pain with inheriting a thing. Maybe you can find some joy in making it better. It’s a genuinely fun platform.

Apr 14, 2022, 3:34 PM

Sanity.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Free to get started, and pay-as-you-go on all plans. Find out more.