From 3f9c84a489a10b55889d249b19b6e5f8ba6fbaeb Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Tue, 27 Feb 2024 12:56:20 -0500
Subject: [PATCH] Fix BoundaryShell usage in default HydrateFallback (#8906)

---
 .changeset/few-rice-join.md              |  5 ++++
 integration/root-route-test.ts           |  1 -
 integration/spa-mode-test.ts             |  2 ++
 packages/remix-react/errorBoundaries.tsx | 38 +++++++++++++-----------
 packages/remix-react/fallback.tsx        |  4 +--
 5 files changed, 28 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/few-rice-join.md

diff --git a/.changeset/few-rice-join.md b/.changeset/few-rice-join.md
new file mode 100644
index 00000000000..12a47d840be
--- /dev/null
+++ b/.changeset/few-rice-join.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+[REMOVE] Fix issue with hydrate fallback boundary shell usage
diff --git a/integration/root-route-test.ts b/integration/root-route-test.ts
index 95a6f0d1fc3..b72ee98b1e6 100644
--- a/integration/root-route-test.ts
+++ b/integration/root-route-test.ts
@@ -148,7 +148,6 @@ test.describe("root route", () => {
     let app = new PlaywrightFixture(appFixture, page);
     await app.goto("/");
     await page.waitForSelector("h1");
-    console.log(await app.getHtml());
     expect(await app.getHtml("title")).toMatch("Layout Title");
     expect(await app.getHtml("h1")).toMatch("Application Error");
 
diff --git a/integration/spa-mode-test.ts b/integration/spa-mode-test.ts
index 7063399405a..e381287703b 100644
--- a/integration/spa-mode-test.ts
+++ b/integration/spa-mode-test.ts
@@ -583,6 +583,8 @@ test.describe("SPA Mode", () => {
       let html = await res.text();
       expect(html.match(/<html/g)?.length).toBe(1);
       expect(html.match(/<\/html/g)?.length).toBe(1);
+      expect(html.match(/window.__remixContext =/g)?.length).toBe(1);
+      expect(html.match(/💿 Hey developer 👋/g)?.length).toBe(1);
     });
   });
 
diff --git a/packages/remix-react/errorBoundaries.tsx b/packages/remix-react/errorBoundaries.tsx
index abb47214e57..5f9caf4d723 100644
--- a/packages/remix-react/errorBoundaries.tsx
+++ b/packages/remix-react/errorBoundaries.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import type { Location } from "@remix-run/router";
 import { isRouteErrorResponse } from "react-router-dom";
 
-import { useRemixContext } from "./components";
+import { Scripts, useRemixContext } from "./components";
 
 type RemixErrorBoundaryProps = React.PropsWithChildren<{
   location: Location;
@@ -66,12 +66,25 @@ export class RemixErrorBoundary extends React.Component<
 export function RemixRootDefaultErrorBoundary({ error }: { error: unknown }) {
   console.error(error);
 
+  let heyDeveloper = (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+        console.log(
+          "💿 Hey developer 👋. You can provide a way better UX than this when your app throws errors. Check out https://remix.run/guides/errors for more information."
+        );
+      `,
+      }}
+    />
+  );
+
   if (isRouteErrorResponse(error)) {
     return (
       <BoundaryShell title="Unhandled Thrown Response!">
         <h1 style={{ fontSize: "24px" }}>
           {error.status} {error.statusText}
         </h1>
+        {heyDeveloper}
       </BoundaryShell>
     );
   }
@@ -102,36 +115,24 @@ export function RemixRootDefaultErrorBoundary({ error }: { error: unknown }) {
       >
         {errorInstance.stack}
       </pre>
+      {heyDeveloper}
     </BoundaryShell>
   );
 }
 
 export function BoundaryShell({
   title,
+  renderScripts,
   children,
 }: {
   title: string;
+  renderScripts?: boolean;
   children: React.ReactNode | React.ReactNode[];
 }) {
   let { routeModules } = useRemixContext();
 
-  let contents = (
-    <>
-      {children}
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `
-              console.log(
-                "💿 Hey developer 👋. You can provide a way better UX than this when your app throws errors. Check out https://remix.run/guides/errors for more information."
-              );
-            `,
-        }}
-      />
-    </>
-  );
-
   if (routeModules.root?.Layout) {
-    return contents;
+    return children;
   }
 
   return (
@@ -146,7 +147,8 @@ export function BoundaryShell({
       </head>
       <body>
         <main style={{ fontFamily: "system-ui, sans-serif", padding: "2rem" }}>
-          {contents}
+          {children}
+          {renderScripts ? <Scripts /> : null}
         </main>
       </body>
     </html>
diff --git a/packages/remix-react/fallback.tsx b/packages/remix-react/fallback.tsx
index 8ee6936731f..e22ccbf41e2 100644
--- a/packages/remix-react/fallback.tsx
+++ b/packages/remix-react/fallback.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 
-import { Scripts } from "./components";
 import { BoundaryShell } from "./errorBoundaries";
 
 // If the user sets `clientLoader.hydrate=true` somewhere but does not
@@ -9,8 +8,7 @@ import { BoundaryShell } from "./errorBoundaries";
 // `clientLoader` functions
 export function RemixRootDefaultHydrateFallback() {
   return (
-    <BoundaryShell title="Loading...">
-      <Scripts />
+    <BoundaryShell title="Loading..." renderScripts>
       <script
         dangerouslySetInnerHTML={{
           __html: `