Avoid hydration error if a server loader returned undefined (#13496)

Author: brophdawg11

.changeset/curvy-queens-hug.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Fix hydration error if a server `loader` returned `undefined`

integration/single-fetch-test.ts

@@ -316,6 +316,24 @@ test.describe("single-fetch", () => {
     expect(await app.getHtml("#date")).toContain(ISO_DATE);
   });
 
+  test("allows SSR loaders to return undefined", async ({ page }) => {
+    let fixture = await createFixture({
+      files: {
+        ...files,
+        "app/routes/_index.tsx": js`
+          export function loader() {}
+          export default function Index() {
+            return <h1>Index</h1>
+          }
+        `,
+      },
+    });
+    let appFixture = await createAppFixture(fixture);
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/", true);
+    expect(await app.getHtml("h1")).toContain("Index");
+  });
+
   test("loads proper data on client side navigation", async ({ page }) => {
     let fixture = await createFixture({
       files,

packages/react-router/__tests__/router/router-test.ts

@@ -961,6 +961,35 @@ describe("a router", () => {
       router.dispose();
     });
 
+    it("allows routes to be initialized with undefined loaderData", async () => {
+      let t = setup({
+        routes: [
+          {
+            id: "root",
+            path: "/",
+            loader: true,
+          },
+        ],
+        hydrationData: {
+          loaderData: {
+            root: undefined,
+          },
+        },
+      });
+
+      expect(t.router.state).toMatchObject({
+        historyAction: "POP",
+        location: {
+          pathname: "/",
+        },
+        initialized: true,
+        navigation: IDLE_NAVIGATION,
+        loaderData: {
+          root: undefined,
+        },
+      });
+    });
+
     it("handles interruptions of initial data load", async () => {
       let parentDfd = createDeferred();
       let parentSpy = jest.fn(() => parentDfd.promise);

packages/react-router/lib/router/router.ts

@@ -4822,7 +4822,7 @@ function shouldLoadRouteOnHydration(
     return false;
   }
 
-  let hasData = loaderData != null && loaderData[route.id] !== undefined;
+  let hasData = loaderData != null && route.id in loaderData;
   let hasError = errors != null && errors[route.id] !== undefined;
 
   // Don't run if we error'd during SSR