Allow fetchers in non-DOM scenarios

Author: brophdawg11

packages/react-router/__tests__/data-router-no-dom-test.tsx

@@ -4,7 +4,7 @@
 
 import * as React from "react";
 import renderer from "react-test-renderer";
-import { RouterProvider } from "../lib/dom/lib";
+import { RouterProvider, useFetcher } from "../lib/dom/lib";
 import { createMemoryRouter } from "../lib/components";
 import { useLoaderData, useNavigate } from "../lib/hooks";
 
@@ -179,4 +179,112 @@ describe("RouterProvider works when no DOM APIs are available", () => {
 
     unsubscribe();
   });
+
+  it("supports fetcher loads", async () => {
+    let router = createMemoryRouter([
+      {
+        path: "/",
+        Component: () => {
+          let fetcher = useFetcher();
+          return (
+            <button onClick={() => fetcher.load("/fetch")}>
+              Load fetcher
+              {fetcher.data || ""}
+            </button>
+          );
+        },
+      },
+      {
+        path: "/fetch",
+        loader() {
+          return "LOADER";
+        },
+      },
+    ]);
+    const component = renderer.create(<RouterProvider router={router} />);
+    let tree = component.toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      <button
+        onClick={[Function]}
+      >
+        Load fetcher
+      </button>
+    `);
+
+    await renderer.act(async () => {
+      // @ts-expect-error
+      tree.props.onClick();
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    });
+
+    tree = component.toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      <button
+        onClick={[Function]}
+      >
+        Load fetcher
+        LOADER
+      </button>
+    `);
+  });
+
+  it("supports fetcher submissions", async () => {
+    let router = createMemoryRouter([
+      {
+        path: "/",
+        Component: () => {
+          let fetcher = useFetcher();
+          return (
+            <button
+              onClick={() =>
+                fetcher.submit(
+                  { message: "echo" },
+                  {
+                    method: "post",
+                    action: "/fetch",
+                    encType: "application/json",
+                  }
+                )
+              }
+            >
+              Submit fetcher
+              {fetcher.data?.message || ""}
+            </button>
+          );
+        },
+      },
+      {
+        path: "/fetch",
+        async action({ request }) {
+          let data = await request.json();
+          return { message: data.message.toUpperCase() };
+        },
+      },
+    ]);
+    const component = renderer.create(<RouterProvider router={router} />);
+    let tree = component.toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      <button
+        onClick={[Function]}
+      >
+        Submit fetcher
+      </button>
+    `);
+
+    await renderer.act(async () => {
+      // @ts-expect-error
+      tree.props.onClick();
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    });
+
+    tree = component.toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      <button
+        onClick={[Function]}
+      >
+        Submit fetcher
+        ECHO
+      </button>
+    `);
+  });
 });

packages/react-router/lib/dom/lib.tsx

@@ -1173,7 +1173,7 @@ export interface NavLinkProps
 
 /**
   Wraps {@link Link | `<Link>`} with additional props for styling active and pending states.
-  
+
   - Automatically applies classes to the link based on its active and pending states, see {@link NavLinkProps.className}.
   - Automatically applies `aria-current="page"` to the link when the link is active. See [`aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) on MDN.
 
@@ -1910,15 +1910,6 @@ export interface FetcherSubmitFunction {
   ): Promise<void>;
 }
 
-function validateClientSideSubmission() {
-  if (typeof document === "undefined") {
-    throw new Error(
-      "You are calling submit during the server render. " +
-        "Try calling submit within a `useEffect` or callback instead."
-    );
-  }
-}
-
 let fetcherId = 0;
 let getUniqueFetcherId = () => `__${String(++fetcherId)}__`;
 
@@ -1949,8 +1940,6 @@ export function useSubmit(): SubmitFunction {
 
   return React.useCallback<SubmitFunction>(
     async (target, options = {}) => {
-      validateClientSideSubmission();
-
       let { action, method, encType, formData, body } = getFormSubmissionInfo(
         target,
         basename
@@ -2132,7 +2121,7 @@ export type FetcherWithComponents<TData> = Fetcher<TData> & {
 
   /**
     Loads data from a route. Useful for loading data imperatively inside of user events outside of a normal button or form, like a combobox or search input.
-      
+
     ```tsx
     let fetcher = useFetcher()
 
@@ -2159,7 +2148,7 @@ export type FetcherWithComponents<TData> = Fetcher<TData> & {
 
 /**
   Useful for creating complex, dynamic user interfaces that require multiple, concurrent data interactions without causing a navigation.
-  
+
   Fetchers track their own, independent state and can be used to load data, submit forms, and generally interact with loaders and actions.
 
   ```tsx

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

@@ -789,7 +789,6 @@ export function createRouter(init: RouterInit): Router {
     typeof routerWindow !== "undefined" &&
     typeof routerWindow.document !== "undefined" &&
     typeof routerWindow.document.createElement !== "undefined";
-  const isServer = !isBrowser;
 
   invariant(
     init.routes.length > 0,
@@ -1973,14 +1972,6 @@ export function createRouter(init: RouterInit): Router {
     href: string | null,
     opts?: RouterFetchOptions
   ) {
-    if (isServer) {
-      throw new Error(
-        "router.fetch() was called during the server render, but it shouldn't be. " +
-          "You are likely calling a useFetcher() method in the body of your component. " +
-          "Try moving it to a useEffect or a callback."
-      );
-    }
-
     if (fetchControllers.has(key)) abortFetcher(key);
     let flushSync = (opts && opts.unstable_flushSync) === true;