fix FormData submitter check (#10627)

* fix FormData submitter check

* Remove duplicate headers test polyfill

* Bundle bump

.changeset/brave-mails-relate.md

@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+(Remove) Fix FormData submitter feature detection check

package.json

@@ -118,7 +118,7 @@
       "none": "16.2 kB"
     },
     "packages/react-router-dom/dist/react-router-dom.production.min.js": {
-      "none": "12.5 kB"
+      "none": "12.6 kB"
     },
     "packages/react-router-dom/dist/umd/react-router-dom.production.min.js": {
       "none": "18.6 kB"

packages/react-router-dom/__tests__/setup.ts

@@ -21,7 +21,6 @@ if (!globalThis.fetch) {
   // @ts-expect-error
   globalThis.Response = Response;
   globalThis.Headers = Headers;
-  globalThis.Headers = Headers;
 }
 
 if (!globalThis.AbortController) {

packages/react-router-dom/dom.ts

@@ -127,12 +127,22 @@ export type SubmitTarget =
   | null;
 
 // One-time check for submitter support
-let formDataSupportsSubmitter = false;
-try {
-  // @ts-expect-error if FormData supports the submitter parameter, this will throw
-  new FormData(undefined, 0);
-} catch (e) {
-  formDataSupportsSubmitter = true;
+let _formDataSupportsSubmitter: boolean | null = null;
+
+function isFormDataSubmitterSupported() {
+  if (_formDataSupportsSubmitter === null) {
+    try {
+      new FormData(
+        document.createElement("form"),
+        // @ts-expect-error if FormData supports the submitter parameter, this will throw
+        0
+      );
+      _formDataSupportsSubmitter = false;
+    } catch (e) {
+      _formDataSupportsSubmitter = true;
+    }
+  }
+  return _formDataSupportsSubmitter;
 }
 
 export interface SubmitOptions {
@@ -257,7 +267,7 @@ export function getFormSubmissionInfo(
     // then tack on the submitter value at the end.  This is a lightweight
     // solution that is not 100% spec compliant.  For complete support in older
     // browsers, consider using the `formdata-submitter-polyfill` package
-    if (!formDataSupportsSubmitter) {
+    if (!isFormDataSubmitterSupported()) {
       let { name, type, value } = target;
       if (type === "image") {
         let prefix = name ? `${name}.` : "";

packages/react-router/__tests__/setup.ts

@@ -1,4 +1,4 @@
-import { fetch, Request, Response } from "@remix-run/web-fetch";
+import { fetch, Request, Response, Headers } from "@remix-run/web-fetch";
 
 // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#configuring-your-testing-environment
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;