{"record":{"id":"40eb830db1ff9b3a","repo":"gatsbyjs/gatsby","slug":"nested-slices-are-not-supported-additionalcontex","errorCode":null,"errorMessage":"Nested slices are not supported.${additionalContextMessage}\n\nSee https://gatsbyjs.com/docs/reference/built-in-components/gatsby-slice#nested-slices","messagePattern":"Nested slices are not supported\\.(.+?)\n\nSee https://gatsbyjs\\.com/docs/reference/built-in-components/gatsby-slice#nested-slices","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/gatsby/cache-dir/slice.js","lineNumber":55,"sourceCode":"      slicesContext.renderEnvironment === `engines` ||\n      slicesContext.renderEnvironment === `dev-ssr`\n    ) {\n      // if we're in SSR, we'll just render the component as is\n      return <InlineSlice {...internalProps} />\n    } else if (slicesContext.renderEnvironment === `slices`) {\n      // we are not yet supporting nested slices\n\n      let additionalContextMessage = ``\n\n      // just in case generating additional contextual information fails, we still want the base message to show\n      // and not show another cryptic error message\n      try {\n        additionalContextMessage = `\\n\\nSlice component \"${slicesContext.sliceRoot.name}\" (${slicesContext.sliceRoot.componentPath}) tried to render <Slice alias=\"${props.alias}\"/>`\n      } catch {\n        // don't need to handle it, we will just skip the additional context message if we fail to generate it\n      }\n\n      throw new Error(\n        `Nested slices are not supported.${additionalContextMessage}\\n\\nSee https://gatsbyjs.com/docs/reference/built-in-components/gatsby-slice#nested-slices`\n      )\n    } else {\n      throw new Error(\n        `Slice context \"${slicesContext.renderEnvironment}\" is not supported.`\n      )\n    }\n  } else {\n    throw new Error(`Slices are disabled.`)\n  }\n}\n\nclass SlicePropsError extends Error {\n  constructor(inBrowser, sliceName, propErrors, renderedByLocation) {\n    const errors = Object.entries(propErrors)\n      .map(\n        ([key, value]) =>\n          `not serializable \"${value}\" type passed to \"${key}\" prop`","sourceCodeStart":37,"sourceCodeEnd":73,"githubUrl":"https://github.com/gatsbyjs/gatsby/blob/8b06340921ffdf23125a365b9c9923690cb62ce6/packages/gatsby/cache-dir/slice.js#L37-L73","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","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."],"exampleFix":"// before — Slice rendering another Slice (nested)\n// src/slices/layout.js (registered as Slice 'layout')\nexport default function Layout({ children }) {\n  return (\n    <div>\n      <Slice alias=\"header\" />\n      {children}\n    </div>\n  )\n}\n\n// after — use a regular component inside the Slice\nimport Header from '../components/Header'\nexport default function Layout({ children }) {\n  return (\n    <div>\n      <Header />\n      {children}\n    </div>\n  )\n}","handlingStrategy":"validation","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["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."],"tags":["slices","nested-slices","composition","react","constraint"],"backgroundTag":null,"analyzedSha":"8b06340921ffdf23125a365b9c9923690cb62ce6","analyzedAt":"2026-08-13T02:36:21.405Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}