gatsbyjs/gatsby · error · Error

Slice name "${sliceName}" not found when rendering slices

Error message

Slice name "${sliceName}" not found when rendering slices

What it means

Thrown in `renderSlices` while iterating `slicesProps`. For each entry it looks up the slice by name in the `slices` array via `slices.find(f => f[0] === sliceName)`; if no slice is registered under that name, rendering cannot proceed. It signals a divergence between the set of slices registered for the build and the slice props/ids queued for HTML rendering.

Source

Thrown at packages/gatsby/src/utils/worker/child/render-html.ts:702

export async function renderSlices({
  slices,
  htmlComponentRendererPath,
  publicDir,
  slicesProps,
  staticQueriesBySliceTemplate,
}: {
  publicDir: string
  slices: Array<[string, IGatsbySlice]>
  slicesProps: Array<ISlicePropsEntry>
  htmlComponentRendererPath: string
  staticQueriesBySliceTemplate: Record<string, Array<string>>
}): Promise<void> {
  const htmlComponentRenderer = require(htmlComponentRendererPath)

  for (const { sliceId, props, sliceName, hasChildren } of slicesProps) {
    const sliceEntry = slices.find(f => f[0] === sliceName)
    if (!sliceEntry) {
      throw new Error(
        `Slice name "${sliceName}" not found when rendering slices`
      )
    }
    const slice = sliceEntry[1]
    const staticQueryHashes =
      staticQueriesBySliceTemplate[slice.componentPath] || []

    const { staticQueryContext } = await getStaticQueryContext(
      staticQueryHashes
    )

    const MAGIC_CHILDREN_STRING = `__DO_NOT_USE_OR_ELSE__`
    const sliceData = await readSliceData(publicDir, slice.name)

    try {
      const html = await htmlComponentRenderer.renderSlice({
        slice,
        staticQueryContext,

View on GitHub (pinned to 8b06340921)

Solutions

Confirm every `sliceName` in `slicesProps` corresponds to a Slice registered via `createSlice` in `gatsby-node`.
Clear `.cache` and rebuild: `rm -rf .cache public && gatsby build`.
Grep templates for `<Slice alias="...">` usages and ensure each alias matches a registered slice name.
If a Slice was renamed, update all references consistently and re-run the build.

Example fix

// before: alias does not match a registered slice
<Slice alias="header-bar" />

// gatsby-node.js registers it as
createSlice({ id: 'header', component: require.resolve('./src/slices/header.tsx') })

// after: make alias match the registered id
<Slice alias="header" />

Defensive patterns

Strategy: validation

Validate before calling

// Before render, assert every referenced slice is registered
const registered = new Set(slices.map(s => s[0]))
const missing = slicesProps.filter(p => !registered.has(p.sliceName))
if (missing.length) throw new Error(`Missing slices: ${missing.map(m => m.sliceName).join(', ')}`)

Prevention

Register every Slice via `createSlice` before referencing it.
Keep `<Slice alias>` usages in sync with registered slice ids.
Clear `.cache` after renaming or removing slices.

When it happens

Trigger: A `slicesProps` entry references a `sliceName` that was not included in the `slices` array passed to `renderSlices`. This arises when a slice is referenced by a page but its registration (via `createSlice` / the slice API) was skipped, or when the slice name was renamed between when props were computed and when the render worker received the slice list.

Common situations: Renaming a Slice without updating all `Slice` component usages; deleting a Slice definition but leaving references in templates; partial cache where slice registration metadata is stale relative to the page data referencing it.

Related errors

AI-assisted analysis of gatsbyjs/gatsby@8b06340921 (2026-08-13). Data as JSON: /api/errors/d1b4a7054051f2b8. Report an issue: GitHub.