Content rendering

Troubleshoot content rendering

This topic describes the most common errors and solutions when rendering Sitecore content in your front-end app.

An orange error box appears on the page

If an orange error box appears showing a component name, that component is not registered in the component map. The fallback component renders this visible error box so you can immediately see which implementations are missing. No nested placeholder children of that component are rendered until you provide an implementation.

To fix the issue, add a render function for the component and register it in the component map.

For structural wrapper components whose only purpose is to expose nested placeholders (PartialDesignDynamicPlaceholder or ContainerFullBleed), the error box will also appear but there are no meaningful fields to render. For these, create a passthrough component that renders only nested children without any visible wrapper:

---
// src/components/Passthrough.astro
import Placeholder from './Placeholder.astro';

const { placeholders } = Astro.props;
---

{Object.entries(placeholders ?? {}).map(([key, items]) => (
  <Placeholder name={key} rendering={items} />
))}

func renderPassthrough(_, _ map[string]any, placeholders map[string][]any) template.HTML {
    var sb strings.Builder
    for key, items := range placeholders {
        sb.WriteString(string(renderPlaceholder(key, items)))
    }
    return template.HTML(sb.String())
}

// src/components/componentMap.js
import Passthrough from './Passthrough.astro';

export const componentMap = {
  // ...existing entries...
  'PartialDesignDynamicPlaceholder': Passthrough,
  'ContainerFullBleed':              Passthrough,
};

// components.go

"PartialDesignDynamicPlaceholder": renderPassthrough,
"ContainerFullBleed":              renderPassthrough,

For content components, build a real component that renders its fields, then add it to the component map:

// src/components/componentMap.js
import Hero from './Hero.astro';

export const componentMap = {
  // ...existing entries...
  'Hero': Hero,
};

// components.go

"Hero": renderHero,

If you have suggestions for improving this article, let us know!