Formik: Property 'translate' is missing in type Form

[cargallo]

🐛 Bug report

Current Behavior

Property 'translate' is missing in type '{ children: any[]; noValidate: true; autoComplete: string; className: string; }' but required in type 'Pick, HTMLFormElement>, "id" | "color" | "children" | "translate" | "hidden" | "style" | "radioGroup" | "title" | ... 254 more ... | "noValidate">'.ts(2741)

Suggested solution(s)

I think that the problem is related to this change

https://github.com/jaredpalmer/formik/pull/1931/files

[dfmartin]

Got this error with 2.0.8, but rolling back to 2.0.7 got rid of the error. That would seem to indicate something changed in the last 3 days since 2.0.7 was released. But I believe you're right about that file, and it hasn't changed since Oct 25th.

[IngenieroLata]

But rolling back to 2.0.7 breaks useField. I end up removing the Form component and use the native form with bindings

[franky47]

I have this issue with 2.0.7 and 2.0.8, rolling back to 2.0.6 fixed it for me.

[andersem]

Reproducable in the codesandbox that comes up in the PR build process: https://codesandbox.io/s/formik-typescript-playground-zhugl. Go to basic.

[DavidSchillinger]

The error disappears for me when upgrading @types/react from 16.9.11 to 16.9.12.

~I'm trying to figure out how to navigate @types versions to see what causes it but figured this might be useful in the meantime.~

EDIT: This change appears to fix the issue when using >= 16.9.12: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/40211

[DavidSchillinger]

The Form type in formik/dist/Form.d.ts ends up being defined as: (truncated for readability)

export declare const Form: React.ForwardRefExoticComponent<
    Pick<
        React.DetailedHTMLProps<
            React.FormHTMLAttributes<HTMLFormElement>,
            HTMLFormElement
        >,
        ...
        "tabIndex" |
        "title" |
        "translate" |
        "radioGroup" |
        "role" |
        ...
    > & React.RefAttributes<HTMLFormElement>
>;

So we pick the translate attribute which doesn't exist on @types/react <16.9.12.
When I copy that definition into my own code (while on 16.9.11), TS does error saying that translate doesn't exist but when using <Form/> this ends up as a required prop :confused:

I think that means that the Form type depends on the @types/react version that happens to be in use when building a version of the library.

I'm not really sure what can be done about this but I'm hoping this is useful to someone.

[SelcukEdma]

Solved my issue
<BaseForm translate="yes">

[stevethatcodes]

@DavidSchillinger I can confirm we saw this issue resolved by adding @types/react to our project (we were previously using the bundled React types) along with the updated Formik version (2.1.0)

[egor-xyz]

Version 2.1.0 Still see this error

[jaredpalmer]

Is the solution to update react types?

[cargallo]

The are actually 2 solutions:
1 - Add or update @react/types to last version (it was a bug corrected in 29th nov 2019 commit), you can check that now there the translate prop is defined as optional.:
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L1712
2 - Adding translate="yes" to the Form component in your own code (easiest one if you have an small project or don't want to update/add @react/types)

[jaredpalmer]

Gosh both are trash. We should add to docs. And update types internally. Can someone make PR?

[cargallo]

I do not know @jaredpalmer , I told you the solutions that anyone can make without modifying the library code, the repo already has 53 PR without merge. I think that there is no need to advice this in the docs if you could update types internally, actually you are using 16.9.11 and the latest version with the correction is 16.9.17 so... no breaking changes at first glance.

[jaredpalmer]

Just bump formik’s deps then

[cargallo]

@tachkoB the second solution should work without any doubt. Anyway this two are workarounds and I understand that the library should update it's own definitions to be solved, something that I understand already made in the latest version. Share some code if you want and I can try to help you. Reggards!

[cargallo]

@tachkoB I need to see your code. Paste the code where you are using the Form component

[cargallo]

@tachkoB firt of all you have to use the following markdown syntax to paste code in JSX here in GitHub, search for more information. Please edit your previous comments to improve readability for future readers. Regarding your problem I think it should be working with translate = "yes" but the error that triggers you is that Form does not accept the property, which is rare. Probably you could share a https://codesandbox.io/ if it is not much work

FILE_NAME

```JSX
YOUR COMPONENT CODE HERE
```

FILE_NAME

YOUR COMPONENT CODE HERE

[cargallo]

@tachkoB You uploaded a sandbox with typescript code inside JS files. I'm sorry but it's getting complicated to help you, I hope someone else can do it. Reggards!

[Rich43]

Upgrading @types/react worked for me, thanks.