Fix BoundaryShell usage in default HydrateFallback (#8906)

remix-run · Feb 27, 2024 · 3f9c84a · 3f9c84a
1 parent d96d909
commit 3f9c84a
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 22 deletions.
diff --git a/.changeset/few-rice-join.md 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
@@ -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
@@ -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
@@ -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
@@ -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: `