fix: add more meaningful error message when nested slices are used (#36800)

* fix: add more meaningful error message when nested slices are used

* add more contextual information if available

* Update packages/gatsby/cache-dir/slice.js

Co-authored-by: Josh Johnson <[email protected]>

Co-authored-by: Josh Johnson <[email protected]>

Author: pieh

packages/gatsby/cache-dir/slice.js

@@ -32,6 +32,22 @@ export function Slice(props) {
     } else if (slicesContext.renderEnvironment === `engines`) {
       // 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://v5.gatsbyjs.com/docs/reference/built-in-components/gatsby-slice#nested-slices`
+      )
     } else {
       throw new Error(
         `Slice context "${slicesContext.renderEnvironment}" is not supported.`

packages/gatsby/cache-dir/static-entry.js

@@ -553,10 +553,20 @@ export { StaticQueryContext, React }
 export async function renderSlice({ slice, staticQueryContext, props = {} }) {
   const { default: SliceComponent } = await getPageChunk(slice)
 
+  const slicesContext = {
+    // we are not yet supporting using <Slice /> placeholders within slice components
+    // setting this renderEnvironemnt to throw meaningful error on `<Slice />` usage
+    // `slices` renderEnvironment should be removed once we support nested `<Slice />` placeholders
+    renderEnvironment: `slices`,
+    sliceRoot: slice,
+  }
+
   const sliceElement = (
-    <StaticQueryContext.Provider value={staticQueryContext}>
-      <SliceComponent sliceContext={slice.context} {...props} />
-    </StaticQueryContext.Provider>
+    <SlicesContext.Provider value={slicesContext}>
+      <StaticQueryContext.Provider value={staticQueryContext}>
+        <SliceComponent sliceContext={slice.context} {...props} />
+      </StaticQueryContext.Provider>
+    </SlicesContext.Provider>
   )
   const sliceWrappedWithWrapRootElement = apiRunner(
     `wrapRootElement`,