export const metadata = { title: ${pageNumber} Admin Development Constraints, }

{metadata.title}

This chapter lists some development constraints of admin widgets and UI routes.

Arrow Functions

Widget and UI route components must be created as arrow functions. Otherwise, Medusa doesn't register them correctly.

export const arrowHighlights = [ ["2", "function", "Don't declare the widget / UI route as a function."], ["7", "() => ", "Use arrow functions when creating a widget / UI route."] ]

// Don't
function ProductWidget() {
  // ...
}

// Do
const ProductWidget = () => {
  // ...
}

Widget Zone

A widget zone's value must be wrapped in double or single quotes. It can't be a template literal or a variable. Otherwise, Medusa doesn't register the widget correctly.

export const zoneHighlights = [ ["3", "product.details.before", "Don't specify the value of zone as a template literal."], ["9", "ZONE", "Don't specify a variable as the value of zone."], ["14", "product.details.before", "Wrap the value of zone in double or single quotes."] ]

// Don't
export const config = defineWidgetConfig({
  zone: `product.details.before`,
})

// Don't
const ZONE = "product.details.after"
export const config = defineWidgetConfig({
  zone: ZONE,
})

// Do
export const config = defineWidgetConfig({
  zone: "product.details.before",
})