Fix React SRR useLayoutEffect console.error when using CompatRouter (#9820)

Author: brookslybrand

contributors.yml

@@ -21,6 +21,7 @@
 - bobziroll
 - BrianT1414
 - brockross
+- brookslybrand
 - brophdawg11
 - btav
 - bvangraafeiland

packages/react-router-dom-v5-compat/__tests__/compat-router-test.tsx

@@ -0,0 +1,30 @@
+/**
+ * @jest-environment node
+ */
+import * as React from "react";
+import * as ReactDOMServer from "react-dom/server";
+import { act } from "react-dom/test-utils";
+import { CompatRouter, Routes } from "../index";
+
+// Have to mock react-router-dom to have a comparable API to v5, otherwise it will
+// be using v6's API and fail
+jest.mock("react-router-dom", () => ({
+  useHistory: () => ({ location: "/" }),
+}));
+
+describe("CompatRouter", () => {
+  it("should not warn about useLayoutEffect when server side rendering", () => {
+    const consoleErrorSpy = jest.spyOn(console, "error");
+
+    act(() => {
+      ReactDOMServer.renderToStaticMarkup(
+        <CompatRouter>
+          <Routes />
+        </CompatRouter>
+      );
+    });
+
+    expect(consoleErrorSpy).toHaveBeenCalledTimes(0);
+    consoleErrorSpy.mockRestore();
+  });
+});

packages/react-router-dom-v5-compat/lib/components.tsx

@@ -23,14 +23,25 @@ export function CompatRoute(props: any) {
   );
 }
 
+// Copied with 💜 from https://github.com/bvaughn/react-resizable-panels/blob/main/packages/react-resizable-panels/src/hooks/useIsomorphicEffect.ts
+const canUseEffectHooks = !!(
+  typeof window !== "undefined" &&
+  typeof window.document !== "undefined" &&
+  typeof window.document.createElement !== "undefined"
+);
+
+const useIsomorphicLayoutEffect = canUseEffectHooks
+  ? React.useLayoutEffect
+  : () => {};
+
 export function CompatRouter({ children }: { children: React.ReactNode }) {
   let history = useHistory();
   let [state, setState] = React.useState(() => ({
     location: history.location,
     action: history.action,
   }));
 
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     history.listen((location: Location, action: Action) =>
       setState({ location, action })
     );