Formik: Switching to v2.0.1 gives TypeScript error

[nareshbhatia]

🐛 Bug report

Current Behavior

The following code worked perfectly fine in 2.0.1-rc.12

return (
    <Formik<FormEntity>
        ...
        render={({ resetForm }) => (
            <Form className={classes.form}>
                <TextField
                    name="name"
                    type="text"
                    label="Name"
                    margin="normal"
                    fullWidth
                />

                ...
            </Form>
        )}
    />
);

However, switching to version 2.0.1 gives the following TypeScript error:

Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<HTMLFormElement>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & RefAttributes<HTMLFormElement>'.  TS2322

    119 |                 }}
    120 |                 render={({ resetForm }) => (
  > 121 |                     <Form className={classes.form}>
        |                      ^
    122 |                         <TextField
    123 |                             name="name"
    124 |                             type="text"

Expected behavior

No TypeScript error when moving to v2.0.1. I can't find this as being a breaking change in the release notes.

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 2.0.1
| React | 16.11.0
| TypeScript | 3.6.4
| Browser |
| npm/Yarn |
| Operating System |

[husseinm]

I have reproduced the same issue when upgrading from v2.0.1-rc13 to v2.0.1

I am using React 16.11.0 as well. (Typescript 3.6.3 in my case)

My specific typing error, is that useField now returns Array<FormikFieldContext | FieldMetaContext> instead of [FormikFieldContext, FieldMetaContext] - a cast to this type would have been preferred, rather than breaking all useFields across all apps, but this is what I believe to be the source of the issue.

Deleting my yarn.lock & downgrading to v2.0.1-rc15 reproduced the same issue for me.
Deleting my yarn.lock & downgrading to v2.0.1-rc14 solved the issue for me.

Looking at the Changelog for v2.0.1-rc.15 leads me to believe the issue stems from the following Breaking Change:

- getFieldProps now only returns FieldInputProps instead of [FieldInputProps, FieldMetaProps]. This makes is more useful to folks using it with just useFormik

Leading me to believe this is not a bug but merely a misunderstanding by us end-users.

Can you confirm @jaredpalmer?

[renanmav]

But I get this error using useField @husseinm, not useFormik

Which problem returning [FieldInputProps, FieldMetaProps] leads to the folks that are using just useFormik?

[husseinm]

Right, but there were two breaking changes in the same commit - look at the changelog's breaking changes, the second one would be relevant to you. @renanmav

[rogerpadilla]

Has same exact typings error than @nareshbhatia using the following form which works fine with formik v1.5.8

import { Formik, Form, Field } from 'formik';

<Formik<Storehouse>
  initialValues={storehouse}
  onSubmit={(values, { setSubmitting }) => {
    storehouseSrv.saveOne(values);
  }}
>
  {({ isSubmitting }) => (
    <Form className={clsx(coreClasses.grid, coreClasses.box)} autoComplete="off" noValidate>
      <Field name="name" label="Nombre" required disabled={isSubmitting} />
      <Field name="address" label="Dirección" disabled={isSubmitting} />
      <Field name="description" label="Descripción" multiline rows={4} disabled={isSubmitting} />
      <div className={coreClasses.actions}>
        <Button color="primary" type="submit" disabled={isSubmitting}>
          Guardar
        </Button>
        <Button color="default" type="submit" disabled={isSubmitting}>
          Guardar y crear otra
        </Button>
      </div>
    </Form>
  )}
</Formik>

Error message:

Type '{ children: Element[]; className: string; autoComplete: string; noValidate: true; }'
is not assignable to type 'IntrinsicAttributes & RefAttributes<HTMLFormElement>'.
Property 'children' does not exist on type 'IntrinsicAttributes & RefAttributes<HTMLFormElement>'.

Environment versions:

"react": "16.11.0"
"typescript": "3.7.1-rc",
"formik": "2.0.1",

[jaredpalmer]

Should be fixed in 2.0.2

[mwarger]

@jaredpalmer I'm still seeing this issue in 2.0.2...

Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & RefAttributes'.

[nareshbhatia]

I am also seeing the same original issue on <Form>:

TypeScript error in /Users/narbhati/projects/slidesup/src/components/AdminConfDays/DayForm.tsx(121,22):
Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<HTMLFormElement>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & RefAttributes<HTMLFormElement>'.  TS2322

    119 |                 }}
    120 |                 render={({ resetForm }) => (
  > 121 |                     <Form className={classes.form}>
        |                      ^
    122 |                         <TextField
    123 |                             name="name"
    124 |                             type="text"

[husseinm]

Counter to the above, I have had my issue with useField resolved with 2.0.2.

On Sun, Oct 27, 2019 at 3:22 PM Naresh Bhatia [e-mail]
wrote:

I am also seeing the same original issue on

:

TypeScript error in /Users/narbhati/projects/slidesup/src/components/AdminConfDays/DayForm.tsx(121,22):
Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & RefAttributes'.
Property 'children' does not exist on type 'IntrinsicAttributes & RefAttributes'. TS2322

119 |                 }}
120 |                 render={({ resetForm }) => (

121 | | ^
122 | 123 | name="name"
124 | type="text"

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jaredpalmer/formik/issues/1927?email_source=notifications&email_token=ABKAJHJ4AUMJHYZT6BBDG4TQQXTABA5CNFSM4JFJOOSKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECLFZ2Q#issuecomment-546725098,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABKAJHJW4GGJEB5HXYGHSH3QQXTABANCNFSM4JFJOOSA
.

--

Mahdi Hussein | CEO/Founder
[email protected] | Cell: 772.486.1172 <[phone]> | LinkedI
https://www.linkedin.com/in/mahdi-hussein-564a0711bn
https://www.linkedin.com/in/mahdi-hussein-564a0711b
Articles https://petrooutlet.com/blog/authors/mahdi-hussein |
petrooutlet.com | 1-800-791-TECH <[phone]>

[jaredpalmer]

I made a mistake in 2.0.1 by accidentally omitting the second generic to React.forwardRef please upgrade to 2.0.2

[mwarger]

@jaredpalmer I'm on 2.0.2 and still see the same error. Can this be re-opened?

Repro: https://codesandbox.io/s/formik-ts-example-k77i3

[nathan-charles]

I’m also still getting this error using 2.0.2

[nareshbhatia]

@jaredpalmer, looks like you have published 2.0.3 to address this issue. Will try ii as soon as I get a chance. FYI, if anyone else wants to give it a try.

[rogerpadilla]

Yeah, just tested it locally, it is solved in 2.0.3, thanks!

[loelsonk]

@jaredpalmer using 2.1.1 results in the typescript error. I checked typescript example from docs:

formik 2.1.1
typescript 3.5.3

Error:(28, 12) TS2739: Type '{ children: Element; }' is missing the following properties from type 'Pick<DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "children" | "style" | "title" | "className" | "acceptCharset" | "action" | "autoComplete" | ... 255 more ... | "key">': translate, onAuxClick, onAuxClickCapture

import * as React from 'react';
import {
  Formik,
  FormikHelpers,
  FormikProps,
  Form,
  Field,
  FieldProps,
} from 'formik';

interface MyFormValues {
  firstName: string;
}

export const MyApp: React.FC<{}> = () => {
  const initialValues: MyFormValues = { firstName: '' };
  return (
    <div>
      <h1>My Example</h1>
      <Formik
        initialValues={initialValues}
        onSubmit={(values, actions) => {
          console.log({ values, actions });
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }}
        render={formikBag => (
          <Form>
            <Field
              name="firstName"
              render={({ field, form, meta }) => (
                <div>
                  <input type="text" {...field} placeholder="First Name" />
                  {meta.touched && meta.error && meta.error}
                </div>
              )}
            />
          </Form>
        )}
      />
    </div>
  );
};

[vukovics]

I have the same problem
"Property 'isValid' does not exist on type 'IntrinsicAttributes & FormikConfig..."
"Property 'spacing' does not exist on type 'IntrinsicAttributes & ContainerProps & { children?: ReactNode; }'.ts(2769)"...

"typescript": "^3.8.2"
"formik": "^2.1.4"

[ds161833]

can reproduce this issue from the https://formik.org/docs/examples/typescript example, literally copy-pasted.
"react": "^16.13.1",
"react-dom": "^16.13.1",
"typescript": "^4.1.2"
"formik": "^2.2.6",

UPDATE: as per: https://github.com/formium/formik/issues/2120#issuecomment-566023003
installing @types/[email protected] fixes the issue