Add deprecation warnings for v2_normalizeFormMethod

.changeset/normalize-form-method-deprecation.md

@@ -0,0 +1,6 @@
+---
+"@remix-run/dev": minor
+"@remix-run/react": minor
+---
+
+Add deprecation warnings for `v2_normalizeFormMethod`

docs/hooks/use-navigation.md

@@ -12,14 +12,17 @@ import { useNavigation } from "@remix-run/react";
 
 function SomeComponent() {
   const navigation = useNavigation();
-  navigation.state;
-  navigation.location;
-  navigation.formData;
-  navigation.formAction;
-  navigation.formMethod;
+  navigation.state; // "idle" | "submitting" | "loading"
+  navigation.location; // Location being navigated to
+  navigation.formData; // formData being submitted
+  navigation.formAction; // url being submitted to
+  navigation.formMethod; // "GET" | "POST" | "PATCH" | "PUT" | "DELETE"
 }
 ```
 
+<docs-warning>The `useNavigation().formMethod` field is lowercase without the `future.v2_normalizeFormMethod` [Future Flag][api-development-strategy]. This is being normalized to uppercase to align with the `fetch()` behavior in v2, so please upgrade your Remix v1 applications to adopt the uppercase HTTP methods.</docs-warning>
+
 <docs-info>For more information and usage, please refer to the [React Router `useNavigation` docs][rr-usenavigation].</docs-info>
 
 [rr-usenavigation]: https://reactrouter.com/hooks/use-navigation
+[api-development-strategy]: ../pages/api-development-strategy

packages/remix-dev/__tests__/create-test.ts

@@ -8,7 +8,11 @@ import stripAnsi from "strip-ansi";
 
 import { run } from "../cli/run";
 import { server } from "./msw";
-import { errorBoundaryWarning, flatRoutesWarning } from "../config";
+import {
+  errorBoundaryWarning,
+  flatRoutesWarning,
+  formMethodWarning,
+} from "../config";
 
 beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
 afterAll(() => server.close());
@@ -349,6 +353,8 @@ describe("the create command", () => {
     ]);
     expect(output.trim()).toBe(
       errorBoundaryWarning +
+        "\n" +
+        formMethodWarning +
         "\n" +
         flatRoutesWarning +
         "\n\n" +

packages/remix-dev/config.ts

@@ -410,6 +410,10 @@ export async function readConfig(
     warnOnce(errorBoundaryWarning, "v2_errorBoundary");
   }
 
+  if (!appConfig.future?.v2_normalizeFormMethod) {
+    warnOnce(formMethodWarning, "v2_normalizeFormMethod");
+  }
+
   let isCloudflareRuntime = ["cloudflare-pages", "cloudflare-workers"].includes(
     appConfig.serverBuildTarget ?? ""
   );
@@ -775,3 +779,9 @@ export const errorBoundaryWarning =
   "behavior in Remix v1 via the `future.v2_errorBoundary` flag in your " +
   "`remix.config.js` file. For more information, see " +
   "https://remix.run/docs/route/error-boundary-v2";
+
+export const formMethodWarning =
+  "⚠️  DEPRECATED: Please enable the `future.v2_normalizeFormMethod` flag to " +
+  "prepare for the Remix v2 release. Lowercase `useNavigation().formMethod`" +
+  "values are being normalized to uppercase in v2 to align with the `fetch()` " +
+  "behavior.  For more information, see https://remix.run/docs/hooks/use-navigation";

packages/remix-react/browser.tsx

@@ -151,6 +151,16 @@ export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
       );
     }
 
+    if (!window.__remixContext.future.v2_normalizeFormMethod) {
+      warnOnce(
+        false,
+        "⚠️  DEPRECATED: Please enable the `future.v2_normalizeFormMethod` flag to " +
+          "prepare for the Remix v2 release. Lowercase `useNavigation().formMethod`" +
+          "values are being normalized to uppercase in v2 to align with the `fetch()` " +
+          "behavior.  For more information, see https://remix.run/docs/hooks/use-navigation"
+      );
+    }
+
     let routes = createClientRoutes(
       window.__remixManifest.routes,
       window.__remixRouteModules,