fetcher.submit Fails When Plain Data Object Contains tagName Property

[7up-charsi]

Reproduction

When using fetcher.submit (from the useFetcher hook) to submit a plain JavaScript object as data (especially with encType: "application/json"), the submission fails with an error intended for invalid DOM elements if the data object contains a property named tagName.

The internal logic seems to incorrectly identify the data object as an invalid HTML element due to the presence of the tagName property, regardless of its value.

Steps to Reproduce

• Use useFetcher in a component.
• Define a plain JavaScript object for submission that includes a tagName property

const formData = {
  tagName: "chatgpt", // The key 'tagName' causes the issue.
  icon: null
};

• Call fetcher.submit with this data and the JSON encoding

fetcher.submit(formData, {
  action: "/api/tags",
  method: "POST",
  encType: "application/json",
});

System Info

System:
    OS: Linux 6.16 Pop!_OS 22.04 LTS
    CPU: (4) x64 Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz
    Memory: 5.06 GB / 15.52 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.17.0 - /home/mzeeshan/.nvm/versions/node/v22.17.0/bin/node
    npm: 11.6.2 - /home/mzeeshan/.nvm/versions/node/v22.17.0/bin/npm
    pnpm: 10.21.0 - /home/mzeeshan/.nvm/versions/node/v22.17.0/bin/pnpm
  Browsers:
    Chrome: 140.0.7339.185
    Firefox: 143.0
    Firefox Developer Edition: 143.0
  npmPackages:
    @react-router/dev: ^7.9.2 => 7.9.5 
    @react-router/node: ^7.9.2 => 7.9.5 
    @react-router/serve: ^7.9.2 => 7.9.5 
    react-router: ^7.9.2 => 7.9.5 
    vite: ^7.1.7 => 7.2.2

Used Package Manager

pnpm

Expected Behavior

The formData object should be serialized and submitted as JSON to the route action defined at /api/tags, as encType: "application/json" is specified.

Actual Behavior

The submission fails with the following error:

Cannot submit element that is not <form>, <button>, or <input type="submit|image">

[rossipedia]

Looks like it's the isHtmlElement check that's a bit too lenient here:

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

Lines 9 to 11 in 132c160

	export function isHtmlElement(object: any): object is HTMLElement {
	return object != null && typeof object.tagName === "string";
	}

Wondering if that should have an instanceof HTMLElement instead 🤔