grumpy-cyan

React 17 type issue

When I try to use tanstack form in a existing project that uses the latest versions of react 17 and it's types, I'm getting back:

form.AppField cannot be used as a JSX component.
Its return type `ReactNode` is not a valid JSX element.
Type `undefined` is not assignable to type `Element | null`

form.AppField cannot be used as a JSX component.
Its return type `ReactNode` is not a valid JSX element.
Type `undefined` is not assignable to type `Element | null`

5 Replies

like-gold•3mo ago

seems like react FCs were stricter in React 17 than React 18 that's a problem ... if we narrowed it to JSX.Element | null, that'd be a breaking change for React 18 users. But this seems like it's going to cause lots of TypeScript errors in React 17

grumpy-cyanOP•3mo ago

It does cause a lot of errors, even for form.Subscribe too. One of the projects my team and I are working is migrating to Tanstack Form, and we are currently stuck on React 17. We've been having to use @ts-ignore to get around our linting, but it is less than ideal 🙁

rising-crimson•3mo ago

You could override our types using a declare module .d.ts file It'd be more code, but better than @ts-ignore

grumpy-cyanOP•3mo ago

What might this d.ts look like to make this work? 🤔 That sounds like a much better option

rising-crimson•3mo ago

declare module "@tanstack/react-form" {
  import {useForm as useTSForm} from "@tanstack/react-form";

  // Transform useTSForm here somehow instead
  var useForm: 123
}

declare module "@tanstack/react-form" {
  import {useForm as useTSForm} from "@tanstack/react-form";

  // Transform useTSForm here somehow instead
  var useForm: 123
}

Gaming

Programming

React 17 type issue

Did you find this page helpful?