Nested slices are not supported.${additionalContextMessage}

Error message

Nested slices are not supported.${additionalContextMessage}

See https://gatsbyjs.com/docs/reference/built-in-components/gatsby-slice#nested-slices

What it means

Thrown when the <Slice> component detects that it is being rendered inside another Slice's render context (slicesContext.renderEnvironment === 'slices'). Gatsby does not support nested Slices — a Slice component's output should not itself contain a <Slice> element. The error includes context about which parent Slice attempted the nesting.

Source

Thrown at packages/gatsby/cache-dir/slice.js:55

      slicesContext.renderEnvironment === `engines` ||
      slicesContext.renderEnvironment === `dev-ssr`
    ) {
      // if we're in SSR, we'll just render the component as is
      return <InlineSlice {...internalProps} />
    } else if (slicesContext.renderEnvironment === `slices`) {
      // we are not yet supporting nested slices

      let additionalContextMessage = ``

      // just in case generating additional contextual information fails, we still want the base message to show
      // and not show another cryptic error message
      try {
        additionalContextMessage = `\n\nSlice component "${slicesContext.sliceRoot.name}" (${slicesContext.sliceRoot.componentPath}) tried to render <Slice alias="${props.alias}"/>`
      } catch {
        // don't need to handle it, we will just skip the additional context message if we fail to generate it
      }

      throw new Error(
        `Nested slices are not supported.${additionalContextMessage}\n\nSee https://gatsbyjs.com/docs/reference/built-in-components/gatsby-slice#nested-slices`
      )
    } else {
      throw new Error(
        `Slice context "${slicesContext.renderEnvironment}" is not supported.`
      )
    }
  } else {
    throw new Error(`Slices are disabled.`)
  }
}

class SlicePropsError extends Error {
  constructor(inBrowser, sliceName, propErrors, renderedByLocation) {
    const errors = Object.entries(propErrors)
      .map(
        ([key, value]) =>
          `not serializable "${value}" type passed to "${key}" prop`

View on GitHub (pinned to 8b06340921)

Solutions

Refactor so Slices are only used in page templates, not inside other Slices.
If a Slice needs shared UI, extract it into a regular React component (not a Slice) and import it into both the page and the Slice.
Flatten the Slice composition: instead of a parent Slice containing child Slices, have the page template directly render multiple Slices.
Review the error message to identify which Slice component is attempting the nesting, then remove the inner <Slice> from that component.

Example fix

// before — Slice rendering another Slice (nested)
// src/slices/layout.js (registered as Slice 'layout')
export default function Layout({ children }) {
  return (
    <div>
      <Slice alias="header" />
      {children}
    </div>
  )
}

// after — use a regular component inside the Slice
import Header from '../components/Header'
export default function Layout({ children }) {
  return (
    <div>
      <Header />
      {children}
    </div>
  )
}

Defensive patterns

Strategy: validation

Prevention

Never render <Slice> inside another Slice component — Slices are terminal, not composable with each other.
Extract shared UI used across Slices into regular React components.
Use page templates to compose multiple Slices at the top level.
Review Slice component source files for nested <Slice> usage during code review.

When it happens

Trigger: A Slice component (registered via gatsby-node.js defineSlice / component option) renders a <Slice alias='...' /> inside its JSX. When Gatsby renders that inner Slice, the renderEnvironment is 'slices', triggering the error. The additional context message tries to identify the parent slice by name and path.

Common situations: A developer composes Slices like regular components, e.g. a 'page' Slice that renders a 'header' Slice and a 'footer' Slice inside it. Refactoring from regular components to Slices and forgetting the nesting constraint.

Related errors

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