Formik: Can't import FormikActions after v2 upgrade

[recurser]

🐛 Bug report

Current Behavior

After upgrading from v1.5.8 to v2.0.2, I get an error Module '"node_modules/formik/dist"' has no exported member 'FormikActions':

15:3 Module '"node_modules/formik/dist"' has no exported member 'FormikActions'.
    13 |   Form,
    14 |   Formik,
  > 15 |   FormikActions,
       |   ^
    16 |   FormikProps,
    17 | } from 'formik'

I'm using FormikActions in an onSubmit handler, in case that's relevant:

const onSubmit = (values: T, actions: FormikActions<T>) => {
    actions.setSubmitting(true)
  ...
}

Expected behavior

In v1.5.8, this import works as expected.

Reproducible example

https://codesandbox.io/s/import-formikactions-oo9lk

If you hover over FormikActions in the example above, you can see the error.

Suggested solution(s)

export FormikActions as before.

Additional context

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 2.0.2 |
| React | 16.11.0 |
| TypeScript | 3.6.4 |
| Browser | Chrome 78.0.3904.70 |
| npm/Yarn | yarn 1.17.3 |
| Operating System | MacOS |

[PoomSmart]

You can rather use FormikHelpers ?

[jhoffmcd]

Yeah I believe this is what to use instead of FormikActions. I'm in the middle of updating to v2 and swapping these two types fixes any errors I get. This is not mentioned anywhere though, maybe the Typescript docs for Formik could be updated to include certain use cases/examples?

[mikehardy]

FormikActions is still the example, and how I got here since I used it: https://github.com/jaredpalmer/formik/blob/master/examples/Basic.tsx#L19

Without a change there people will continue to go astray

FormikBag is mentioned as the type for the handleSubmit in the API: https://github.com/jaredpalmer/formik/blob/master/docs/api/formik.md#L328

Without a change there it seems odd (not incorrect, just odd) to recommend FormikHelpers? Should it be an '|' type in the API?

I see FormikHelpers in the source but it isn't documented anywhere? And it takes a 'Values' object, not a FormikValues object? https://github.com/jaredpalmer/formik/blob/master/src/types.tsx#L77

Right now when I switch my most basic email/password input form to FormikHelpers as a type I get this, which is where I am now.

Argument of type 'FormikHelpers<{ email: any; password: string; }>' is not assignable to parameter of type 'FormikHelpers<FormikValues>'.
  Types of property 'setFormikState' are incompatible.
    Type '(f: FormikState<{ email: any; password: string; }> | ((prevState: FormikState<{ email: any; password: string; }>) => FormikState<{ email: any; password: string; }>), cb?: (() => void) | undefined) => void' is not assignable to type '(f: FormikState<FormikValues> | ((prevState: FormikState<FormikValues>) => FormikState<FormikValues>), cb?: (() => void) | undefined) => void'.
      Types of parameters 'f' and 'f' are incompatible.
        Type 'FormikState<FormikValues> | ((prevState: FormikState<FormikValues>) => FormikState<FormikValues>)' is not assignable to type 'FormikState<{ email: any; password: string; }> | ((prevState: FormikState<{ email: any; password: string; }>) => FormikState<{ email: any; password: string; }>)'.
          Type 'FormikState<FormikValues>' is not assignable to type 'FormikState<{ email: any; password: string; }> | ((prevState: FormikState<{ email: any; password: string; }>) => FormikState<{ email: any; password: string; }>)'.
            Type 'FormikState<FormikValues>' is not assignable to type 'FormikState<{ email: any; password: string; }>'.
              Types of property 'values' are incompatible.
                Type 'FormikValues' is not assignable to type '{ email: any; password: string; }'.

If I get dirty with it and hack the export interface FormkHelpers<Values> in types.d.ts to be export interface FormikHelpers<FormikValues> I no longer receive type errors.

So, why is FormikValues type defined and exported if it does not seem to be passed in anywhere?

I'm not great at typescript typing so I might be missing something obvious

[mikehardy]

So here's how I am un-blocking myself currently but I only ever consider use of patch-package to be "pending resolution" - @jhoffmcd / @PoomSmart if you guys have any ideas I'd love to hear them :-)

My general thinking is in types.tsx all the uses of 'Values' should be 'FormikValues' but as mentioned this could be an elementary mistake. And then the example would be re-wired to reference FormikHelpers vs FormikActions, and the docs would mention it in the type on the API as well?

I can propose a PR but I'd want some validation on the idea first

Cheers :-)

(base) mike@kunashir:~/work/Kullki/ksocialscore/packages/public-app (vp1 *) % more patches/formik+2.0.3.patch 
diff --git a/node_modules/formik/dist/types.d.ts b/node_modules/formik/dist/types.d.ts
index ecfb717..af6dce5 100644
--- a/node_modules/formik/dist/types.d.ts
+++ b/node_modules/formik/dist/types.d.ts
@@ -25,7 +25,7 @@ export interface FormikComputedProps<Values> {
     readonly initialTouched: FormikTouched<Values>;
     readonly initialStatus?: any;
 }
-export interface FormikHelpers<Values> {
+export interface FormikHelpers<FormikValues> {
     setStatus(status?: any): void;
     setErrors(errors: FormikErrors<Values>): void;
     setSubmitting(isSubmitting: boolean): void;

[recurser]

Thanks @PoomSmart - using FormikHelpers works for me 👍 I've submitted #2001 to update the example. @mikehardy I'm not sure about Values vs FormikValues though...

Closing this.

[mikehardy]

I'll have to figure that out then - I'm still carrying that as a patch but if the idea is a non-starter I must be doing something silly in my project. Thanks in general for Formik by the way!

[jhoffmcd]

@mikehardy I believe Values is what you define as your form values? Typically we set a type FormValues = ... and use ilke this: FormikHelpers<FormValues>.

[nhducit]

Many people have this issue when migrating to v2, should we update this issue in the migration guide.
@jaredpalmer

edit: the migration guide is updated already
https://github.com/jaredpalmer/formik/blob/master/docs/migrating-v2.md#typescript-changes

[christoph-teichmeister]

I'll have to figure that out then - I'm still carrying that as a patch but if the idea is a non-starter I must be doing something silly in my project. Thanks in general for Formik by the way!

Have you managed to figure this out in the meantime? I've been sitting in front of the exact same error you've posted for the past hour and cant find a solution

[mikehardy]

@christoph-teichmeister I did! I suppose I should have posted back. Really it was as simple as realizing (after thinking through the helpful comments above) that the type I was missing was quite specifically one I was supposed to define myself. It's my form. So now I have this chunk (for example, on a login form):

The type def:

type LoginFormikValues = {
  email: string;
  password: string;
};

Then a handler:

  private _onLoginClick = async (
    values: LoginFormikValues,
    actions: FormikHelpers<LoginFormikValues>
  ) => {
    const { email, password } = values;
    console.log('Login::_onLoginClick'); // - user / pass? ' + email + ' / ' + password);

  // ...and so on

and the form usage:

 <Formik
            initialValues={{
              email:
                (!this.state.loading && this.state.user && this.state.user.email) ||
                this.props.navigation.getParam('emailAddress', ''),
              password: '',
            }}
            validateOnChange={false}
            validateOnBlur={false}
            onSubmit={(values, actions) => this._onLoginClick(values, actions)}
            validate={values => this.onValidateLoginForm(values)}
          >
         // and so on

I think that's what you were asking?