'component' property is missing at index ${j} in the 'displa

Error message

'component' property is missing at index ${j} in the 'displays' property.

What it means

Each displays entry must declare a 'component' property — the path to the React component file that renders the custom-field display. When an entry has zone but no statically parseable component key, that entry is skipped with this warning naming its index.

Source

Thrown at packages/admin/admin-vite-plugin/src/custom-fields/generate-custom-field-displays.ts:258

    const fullPath = getDisplayEntryPath(model, zone)

    if (
      !isValidCustomFieldDisplayZone(zone) ||
      !isValidCustomFieldDisplayPath(fullPath)
    ) {
      logger.warn(
        `'zone' is invalid at index ${j} in the 'displays' property. Received: ${zone}.`,
        { file }
      )
      return
    }

    const componentProperty = element.properties.find(
      (p) => isObjectProperty(p) && isIdentifier(p.key, { name: "component" })
    ) as ObjectProperty | undefined

    if (!componentProperty) {
      logger.warn(
        `'component' property is missing at index ${j} in the 'displays' property.`,
        { file }
      )
      return
    }

    displays.push({
      zone: zone,
      Component: getDisplayComponent(index, j),
    })
  })

  return displays.length > 0 ? displays : null
}

function getDisplayEntryPath(model: CustomFieldModel, zone: string): string {
  return `${model}.${zone}.$display`
}

View on GitHub (pinned to 5e06e544a2)

Solutions

Add component: "<path-to-component-file>" to the displays entry at the reported index
Keep the value a plain string literal path resolvable from the project
Verify exact key spelling: component

Example fix

// before
displays: [
  { zone: "general" },
]

// after
displays: [
  {
    zone: "general",
    component: "/src/admin/custom-fields/brand/components/name.tsx",
  },
]

Defensive patterns

Strategy: validation

Validate before calling

cfg.displays.forEach((d, i) => {
  if (typeof d.component !== "string") throw new Error(`displays[${i}] missing component`)
})

Type guard

const isDisplayEntry = (d: unknown): d is { zone: string; component: string } =>
  typeof d === "object" && d !== null &&
  typeof (d as any).zone === "string" && typeof (d as any).component === "string"

Try / catch

null

Prevention

Every displays entry needs a component path string literal
Verify component paths resolve before starting the dev server
Type-check configs against the official display entry type

When it happens

Trigger: A displays entry like { zone: "general" } with no component; component defined via a variable or computed key; the key misspelled (Component, componentPath).

Common situations: Assuming the component is auto-derived from the file location; refactoring paths into constants; partial copy-paste from examples.

Related errors

AI-assisted analysis of medusajs/medusa@5e06e544a2 (2026-08-27). Data as JSON: /api/errors/2a49b04aba39e9d1. Report an issue: GitHub.