5.8. Admin Development Constraints

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.

Code
// 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.

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

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

// Do
export const config = defineWidgetConfig({
  zone: "product.details",
})
Was this chapter helpful?
Ask Bloom
For assistance in your development, use Claude Code Plugins or Docs MCP server in Cursor, VSCode, etc...FAQ
What is Medusa?
How can I create a module?
How can I create a data model?
How do I create a workflow?
How can I extend a data model in the Product Module?
Recipes
How do I build a marketplace with Medusa?
How do I build digital products with Medusa?
How do I build subscription-based purchases with Medusa?
What other recipes are available in the Medusa documentation?
Chat is cleared on refresh
Line break
⇧↵