Allow returning undefined from actions and loaders

.changeset/fluffy-ducks-try.md

@@ -0,0 +1,5 @@
+---
+"react-router-dom": major
+---
+
+Allow returning `undefined` from actions and loaders

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

@@ -1987,7 +1987,7 @@ describe("a router", () => {
       router.dispose();
     });
 
-    it("throws an error if actions/loaders return undefined", async () => {
+    it("allows returning undefined from actions/loaders", async () => {
       let t = setup({
         routes: [
           {
@@ -2008,12 +2008,10 @@ describe("a router", () => {
         location: {
           pathname: "/path",
         },
-        errors: {
-          path: new Error(
-            'You defined a loader for route "path" but didn\'t return anything ' +
-              "from your `loader` function. Please return a value or `null`."
-          ),
+        loaderData: {
+          path: undefined,
         },
+        errors: null,
       });
 
       await t.navigate("/");
@@ -2029,16 +2027,18 @@ describe("a router", () => {
         formData: createFormData({}),
       });
       await nav3.actions.path.resolve(undefined);
+      await nav3.loaders.path.resolve("PATH");
       expect(t.router.state).toMatchObject({
         location: {
           pathname: "/path",
         },
-        errors: {
-          path: new Error(
-            'You defined an action for route "path" but didn\'t return anything ' +
-              "from your `action` function. Please return a value or `null`."
-          ),
+        actionData: {
+          path: undefined,
+        },
+        loaderData: {
+          path: "PATH",
         },
+        errors: null,
       });
     });
   });

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

@@ -2065,33 +2065,11 @@ describe("ssr", () => {
       expect(data).toBe("");
     });
 
-    it("should error if an action/loader returns undefined", async () => {
+    it("should allow returning undefined from an action/loader", async () => {
       let T = setupFlexRouteTest();
-      let data;
-
-      try {
-        data = await T.resolveLoader(undefined);
-      } catch (e) {
-        data = e;
-      }
-      expect(data).toEqual(
-        new Error(
-          'You defined a loader for route "flex" but didn\'t return anything ' +
-            "from your `loader` function. Please return a value or `null`."
-        )
-      );
 
-      try {
-        data = await T.resolveAction(undefined);
-      } catch (e) {
-        data = e;
-      }
-      expect(data).toEqual(
-        new Error(
-          'You defined an action for route "flex" but didn\'t return anything ' +
-            "from your `action` function. Please return a value or `null`."
-        )
-      );
+      expect(await T.resolveLoader(undefined)).toBeUndefined();
+      expect(await T.resolveAction(undefined)).toBeUndefined();
     });
 
     it("should handle relative redirect responses (loader)", async () => {

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

@@ -4398,13 +4398,6 @@ async function callLoaderOrAction(
     } else {
       result = await runHandler(handler);
     }
-
-    invariant(
-      result.result !== undefined,
-      `You defined ${type === "action" ? "an action" : "a loader"} for route ` +
-        `"${match.route.id}" but didn't return anything from your \`${type}\` ` +
-        `function. Please return a value or \`null\`.`
-    );
   } catch (e) {
     // We should already be catching and converting normal handler executions to
     // HandlerResults and returning them, so anything that throws here is an