Deprecated FormEvent<HTMLFormElement> type for Form onSubmit events when using React 19

[z0n]

Reproduction

Check out https://stackblitz.com/edit/github-was1dks4?file=app%2Froutes%2Fhome.tsx

The event parameter in the <fetcher.Form> onSubmit property is typed as FormEvent<HTMLFormElement>.
In the current @types/react package (v19.2.13), FormEvent is deprecated: DefinitelyTyped/DefinitelyTyped#74383

It should probably changed to a SubmitEvent instead.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @react-router/dev: 7.12.0 => 7.12.0 
    @react-router/node: 7.12.0 => 7.12.0 
    @react-router/serve: 7.12.0 => 7.12.0 
    react-router: 7.12.0 => 7.12.0 
    vite: ^7.1.7 => 7.3.1

Used Package Manager

npm

Expected Behavior

The onSubmit event parameter is using the correct up-to-date types.

Actual Behavior

I'm getting TypeScript/linter errors and warnings as I either have to use a deprecated type or deal with mismatching types (FormEvent<HTMLFormElement> vs SubmitEvent).

[timdorr]

It appears we get just a deprecation warning.

For now, I would use module augmentation to override if you're using the newer React types. Put this in a react-router.d.ts file (or anything .d.ts):

import type { SubmitEventHandler } from 'react'

declare module 'react-router' {
  interface FetcherFormProps {
    onSubmit?: SubmitEventHandler<HTMLFormElement>
  }
}

In the meantime, we shouldn't necessarily change this, as it will break all users of the earlier React types. We don't include @types/* packages as dependencies, so we can't enforce what version folks are using. I'm not sure what the best course of action is, to be honest.

[z0n]

Thanks, I'll try your workaround for now!

I'm also not sure how to handle this properly as just changing types will break it for people on older React versions as you said... Maybe someone with more knowledge can chime in 😄

[maurer2]

Hello! As a quick workaround, one could find and replace the FormEvent imports in each file with aliases, e.g. SubmitEventHandler as FormEvent. Probably requires a smart regex, that can distinguish between imports, that should change and type annotations in the actual components that should remain untouched.

Cheers

[Michael-Gatmaitan]

I have tried using SubmitEventHandler<HTMLFormElement> but still gives me and error.
As the error said,

const handleSubmit = (e: SubmitEvent<HTMLFormElement>) => { // 🎉 }

Hope this helps