From 6c7a0e3ab1a6b7aa1a7ef288b8d61bdf4e5b4622 Mon Sep 17 00:00:00 2001
From: Michal Piechowiak <misiek.piechowiak@gmail.com>
Date: Mon, 3 Jul 2023 12:57:27 +0200
Subject: [PATCH] fix(gatsby): copy slices overrides to 404.html copy (#38337)

---
 .../slices/slice-via-create-page.js           | 10 ++++++++
 e2e-tests/development-runtime/gatsby-node.js  | 12 ++++++++++
 .../src/components/mapped-slice.js            |  7 ++++++
 .../development-runtime/src/pages/404.js      |  3 ++-
 .../slices/slice-via-create-page.js           |  8 +++++++
 e2e-tests/production-runtime/gatsby-node.ts   | 12 ++++++++++
 .../src/components/mapped-slice.js            |  7 ++++++
 e2e-tests/production-runtime/src/pages/404.js |  3 ++-
 .../prod-404-500/gatsby-node.js               | 23 +++++++++++--------
 9 files changed, 73 insertions(+), 12 deletions(-)
 create mode 100644 e2e-tests/development-runtime/src/components/mapped-slice.js
 create mode 100644 e2e-tests/production-runtime/src/components/mapped-slice.js

diff --git a/e2e-tests/development-runtime/cypress/integration/slices/slice-via-create-page.js b/e2e-tests/development-runtime/cypress/integration/slices/slice-via-create-page.js
index 3e0b4cd6cecb5..fff84a1e175a6 100644
--- a/e2e-tests/development-runtime/cypress/integration/slices/slice-via-create-page.js
+++ b/e2e-tests/development-runtime/cypress/integration/slices/slice-via-create-page.js
@@ -22,4 +22,14 @@ describe("Slice passed via createPage", () => {
         .should(`contain`, allRecipeAuthors.find(author => recipe.authorId === author.id).name)
     })
   })
+
+  it(`404 pages with slices mapping have correct content`, () => {
+    cy.visit(`/doesnt-exist`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
+
+    cy.get(`button`).click()
+
+    cy.getTestElement(`mapped-slice`).should("have.text", "My mapped Slice")
+  })
 })
diff --git a/e2e-tests/development-runtime/gatsby-node.js b/e2e-tests/development-runtime/gatsby-node.js
index 8fec596990772..8c5191795ffde 100644
--- a/e2e-tests/development-runtime/gatsby-node.js
+++ b/e2e-tests/development-runtime/gatsby-node.js
@@ -216,6 +216,11 @@ exports.createPages = async function createPages({
     },
   })
 
+  createSlice({
+    id: `mappedslice-fakeid`,
+    component: require.resolve(`./src/components/mapped-slice.js`),
+  })
+
   slicesData.allRecipeAuthors.forEach(({ id, name }) => {
     createSlice({
       id: `author-${id}`,
@@ -342,6 +347,13 @@ exports.onCreatePage = async ({ page, actions }) => {
       })
     }
   }
+
+  if (page.path === `/404/`) {
+    createPage({
+      ...page,
+      slices: { mappedslice: "mappedslice-fakeid" },
+    })
+  }
 }
 
 /**
diff --git a/e2e-tests/development-runtime/src/components/mapped-slice.js b/e2e-tests/development-runtime/src/components/mapped-slice.js
new file mode 100644
index 0000000000000..6d6c742acaada
--- /dev/null
+++ b/e2e-tests/development-runtime/src/components/mapped-slice.js
@@ -0,0 +1,7 @@
+import * as React from "react"
+
+const MappedSlice = () => {
+  return <div data-testid="mapped-slice">My mapped Slice</div>
+}
+
+export default MappedSlice
diff --git a/e2e-tests/development-runtime/src/pages/404.js b/e2e-tests/development-runtime/src/pages/404.js
index 01b33ec667f02..d1abf2a04d95e 100644
--- a/e2e-tests/development-runtime/src/pages/404.js
+++ b/e2e-tests/development-runtime/src/pages/404.js
@@ -1,5 +1,5 @@
 import React from "react"
-import { graphql, Link } from "gatsby"
+import { graphql, Link, Slice } from "gatsby"
 
 import Layout from "../components/layout"
 import Seo from "../components/seo"
@@ -64,6 +64,7 @@ const NotFoundPage = ({ data }) => (
         Go to page B
       </Link>
     </fieldset>
+    <Slice alias="mappedslice" />
   </Layout>
 )
 export const Head = () => <Seo title="404: Not found" />
diff --git a/e2e-tests/production-runtime/cypress/integration/slices/slice-via-create-page.js b/e2e-tests/production-runtime/cypress/integration/slices/slice-via-create-page.js
index 3e0b4cd6cecb5..d984b47549417 100644
--- a/e2e-tests/production-runtime/cypress/integration/slices/slice-via-create-page.js
+++ b/e2e-tests/production-runtime/cypress/integration/slices/slice-via-create-page.js
@@ -22,4 +22,12 @@ describe("Slice passed via createPage", () => {
         .should(`contain`, allRecipeAuthors.find(author => recipe.authorId === author.id).name)
     })
   })
+
+  it(`404 pages with slices mapping have correct content`, () => {
+    cy.visit(`/doesnt-exist`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
+
+    cy.getTestElement(`mapped-slice`).should("have.text", "My mapped Slice")
+  })
 })
diff --git a/e2e-tests/production-runtime/gatsby-node.ts b/e2e-tests/production-runtime/gatsby-node.ts
index 17c6e7242e3ee..807f90efbd1a0 100644
--- a/e2e-tests/production-runtime/gatsby-node.ts
+++ b/e2e-tests/production-runtime/gatsby-node.ts
@@ -137,6 +137,11 @@ export const createPages: GatsbyNode["createPages"] = ({
     },
   })
 
+  createSlice({
+    id: `mappedslice-fakeid`,
+    component: path.resolve(`./src/components/mapped-slice.js`),
+  })
+
   slicesData.allRecipeAuthors.forEach(({ id, name }) => {
     createSlice({
       id: `author-${id}`,
@@ -322,5 +327,12 @@ export const onCreatePage: GatsbyNode["onCreatePage"] = ({ page, actions }) => {
         },
       })
       break
+    case `/404/`: {
+      actions.createPage({
+        ...page,
+        slices: { mappedslice: "mappedslice-fakeid" },
+      })
+      break
+    }
   }
 }
diff --git a/e2e-tests/production-runtime/src/components/mapped-slice.js b/e2e-tests/production-runtime/src/components/mapped-slice.js
new file mode 100644
index 0000000000000..6d6c742acaada
--- /dev/null
+++ b/e2e-tests/production-runtime/src/components/mapped-slice.js
@@ -0,0 +1,7 @@
+import * as React from "react"
+
+const MappedSlice = () => {
+  return <div data-testid="mapped-slice">My mapped Slice</div>
+}
+
+export default MappedSlice
diff --git a/e2e-tests/production-runtime/src/pages/404.js b/e2e-tests/production-runtime/src/pages/404.js
index e36dfc20ab3f7..dcc70c05ff622 100644
--- a/e2e-tests/production-runtime/src/pages/404.js
+++ b/e2e-tests/production-runtime/src/pages/404.js
@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Link } from "gatsby"
+import { Link, Slice } from "gatsby"
 
 import Layout from "../components/layout"
 import Seo from "../components/seo"
@@ -12,6 +12,7 @@ const NotFoundPage = () => (
     <Link to="/" data-testid="index">
       Go to Index
     </Link>
+    <Slice alias="mappedslice" />
   </Layout>
 )
 
diff --git a/packages/gatsby/src/internal-plugins/prod-404-500/gatsby-node.js b/packages/gatsby/src/internal-plugins/prod-404-500/gatsby-node.js
index 3d59d3efc36c9..a028cf7881bcf 100644
--- a/packages/gatsby/src/internal-plugins/prod-404-500/gatsby-node.js
+++ b/packages/gatsby/src/internal-plugins/prod-404-500/gatsby-node.js
@@ -1,3 +1,5 @@
+const isEqual = require(`lodash/isEqual`)
+
 const { emitter, store } = require(`../../redux`)
 const { actions } = require(`../../redux/actions`)
 
@@ -15,21 +17,22 @@ emitter.on(`CREATE_PAGE`, action => {
 
     const originalPage = originalStatusPageByStatus[status]
 
-    if (!originalPage) {
-      const storedPage = {
-        path: action.payload.path,
-        component: action.payload.component,
-        context: action.payload.context,
-        status,
-      }
+    const pageToStore = {
+      path: action.payload.path,
+      component: action.payload.component,
+      context: action.payload.context,
+      slices: action.payload.slices,
+      status,
+    }
 
-      originalStatusPageByStatus[status] = storedPage
-      originalStatusPageByPath[action.payload.path] = storedPage
+    if (!originalPage || !isEqual(originalPage, pageToStore)) {
+      originalStatusPageByStatus[status] = pageToStore
+      originalStatusPageByPath[action.payload.path] = pageToStore
 
       store.dispatch(
         actions.createPage(
           {
-            ...storedPage,
+            ...pageToStore,
             path: `/${status}.html`,
           },
           action.plugin,