Support for Ant Design 5

[YassineDM]

Hi there, just wondering whether you were considering support for Ant Design 5…

[amirshahamiri]

Hi i have updated to Ant Design 5 and having problem with formik-antd. Would you please add support for ant design 5?

[imamaad]

Hello guys thank you for supporting formik antd.
I have a project that that written with Ant Design 4 and I really want to updated it ti Ant 5 but I see some people have problem with updated version
When can I update to Ant Design 5 ?

[jannikbuschke]

It probably is relatively easy to support antd5, I,m a bit overloaded with work though... Ill try to look into it this week

[jannikbuschke]

Or feel free to open a PR

[jannikbuschke]

Added storybook and started working on support for v5: #205
I tried to migrate AutoComplete and Input, both seem to work kind of fine. When running "npm run tsc" currently 26 errors are shown. It is probably necessary to change the imported prop types. if anyone wants to help it would be appreciated.

[jannikbuschke]

new version with support for antd5 : 3.0.0-beta.0

I only tested locally within storybook. Most components just seem to work fine.
I didnt test in a real application, and it seems they changed how styles are embedded, so I am not sure if this version works in real application.

Can you please test and report here?

[imamaad]

The following command cannot be used:
import {Form} from "formik-antd";
It must be imported from src:
import {Form} from "formik-antd/src";

[imamaad]

keepOffset does not work in DatePicker.

[imamaad]

ERROR in node_modules/formik-antd/src/tree-select/index.tsx:23:4
TS2322: Type '{ children: ({ field: { value }, form }: FieldProps<any, any>) => Element; name: string; validate: ((value: any) => string | Promise | undefined) | undefined; fast: boolean | undefined; }' is not assignable to typ
e 'IntrinsicAttributes & FormikFieldProps'.
Property 'children' does not exist on type 'IntrinsicAttributes & FormikFieldProps'.
21 | ...restProps
22 | }: TreeSelectProps) => (

23 |
| ^^^^^
24 | {({ field: { value }, form }: FieldProps) => (
25 | <$TreeSelect
26 | value={value}

[jannikbuschke]

FYI as antd 5 defaults to dayjs instead of moment I did the same and also removed keepOffset from all date/time components.

[imamaad]

When running "npm run tsc" :
$ tsc && tsc -p tsconfig.json
src/array-button/index.tsx:14:6 - error TS2786: 'FieldArray' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<FieldArrayConfig, any, any> | null' is not a valid JSX element.
Type 'Component<FieldArrayConfig, any, any>' is not assignable to type 'Element | ElementClass | null'.
Type 'Component<FieldArrayConfig, any, any>' is not assignable to type 'ElementClass'.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/IMAMAAD/Desktop/projects/formik-antd/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.

14
~~~~~~~~~~

src/date-picker/index.tsx:33:8 - error TS2786: '$DatePicker' cannot be used as a JSX component.
Its instance type 'Component<PickerProps & { status?: "" | "warning" | "error" | undefined; hashId?: string | undefined; popupClassName?: string | undefined; }, unknown, any> & CommonPickerMethods' is not a valid JSX elemen
t.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/IMAMAAD/Desktop/projects/formik-antd/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.

33 <$DatePicker
~~~~~~~~~~~

src/date-picker/index.tsx:60:8 - error TS2786: '$MonthPicker' cannot be used as a JSX component.
Its instance type 'Component<Omit<PickerProps & { status?: "" | "warning" | "error" | undefined; hashId?: string | undefined; popupClassName?: string | undefined; }, "picker">, unknown, any> & CommonPickerMethods' is not a
valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/IMAMAAD/Desktop/projects/formik-antd/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.

60 <$MonthPicker
~~~~~~~~~~~~

src/date-picker/index.tsx:84:8 - error TS2786: '$RangePicker' cannot be used as a JSX component.
Its instance type 'Component<RangePickerProps & { dropdownClassName?: string | undefined; popupClassName?: string | undefined; }, unknown, any> & CommonPickerMethods' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/IMAMAAD/Desktop/projects/formik-antd/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.

84 <$RangePicker
~~~~~~~~~~~~

src/date-picker/index.tsx:109:8 - error TS2786: '$WeekPicker' cannot be used as a JSX component.
Its instance type 'Component<Omit<PickerProps & { status?: "" | "warning" | "error" | undefined; hashId?: string | undefined; popupClassName?: string | undefined; }, "picker">, unknown, any> & CommonPickerMethods' is not a
valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/IMAMAAD/Desktop/projects/formik-antd/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.

109 <$WeekPicker
~~~~~~~~~~~

src/field/index.tsx:11:13 - error TS2786: 'FastField' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<any, any, any> | null' is not a valid JSX element.
Type 'Component<any, any, any>' is not assignable to type 'Element | ElementClass | null'.
Type 'Component<any, any, any>' is not assignable to type 'ElementClass'.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/IMAMAAD/Desktop/projects/formik-antd/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.

11 return <FastField {...restProps}>{children}
~~~~~~~~~

Found 6 errors in 3 files.

Errors Files
1 src/array-button/index.tsx:14
4 src/date-picker/index.tsx:33
1 src/field/index.tsx:11
error Command failed with exit code 2.

[jannikbuschke]

new version 3.0.0-beta.3

[imamaad]

Error when using Datepicker

TypeError: date.locale is not a function
at Object.format (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-d93568.iframe.bundle.js:112839:19)
at formatValue (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-d93568.iframe.bundle.js:115898:79)
at http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-d93568.iframe.bundle.js:113563:83
at useMemo (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-d93568.iframe.bundle.js:134601:30)
at useValueTexts (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-d93568.iframe.bundle.js:113552:78)
at InnerPicker (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-d93568.iframe.bundle.js:110509:89)
at renderWithHooks (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-d93568.iframe.bundle.js:151357:18)
at updateFunctionComponent (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-d93568.iframe.bundle.js:153728:20)
at beginWork (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-d93568.iframe.bundle.js:155435:16)
at HTMLUnknownElement.callCallback (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-d93568.iframe.bundle.js:140317:14)

[jannikbuschke]

new version 3.0.0-beta.4

[tmiroslav97]

Hi, before upgrading I didn't have any errors in my project, after upgrading antd to v5.x and formik-antd to v3.0.0-beta.4 I am getting this error:

index.js:1 Warning: [antd: Form.Item] A Form.Item with a name prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/complex-form-item.
at Field (http://localhost:3000/static/js/vendors~main.chunk.js:188729:94)
at WrapperField (http://localhost:3000/static/js/vendors~main.chunk.js:189307:20)
at InternalFormItem (http://localhost:3000/static/js/vendors~main.chunk.js:122514:20)
at Field (http://localhost:3000/static/js/vendors~main.chunk.js:169272:23)
at FormItem (http://localhost:3000/static/js/vendors~main.chunk.js:166612:5)
...

I read about this error in antd docs but it seems that I have done everything right. Structure of my forms is the same as before. Maybe I am missing something. Example of my text input in Formik Form:

Thank you!

[jannikbuschke]

@tmiroslav97 can you show some code?

[jannikbuschke]

3.0.0-beta.6 landed
Feedback would be appreciated

[tmiroslav97]

@jannikbuschke error has disappeared after installing beta.6 (I saw that you implemented that in this commit 10b188a) but there is another problem now. Bindings are not working, initial values that аrе passed to Form are not displayed when I open form. When I am filing form binding is working, only problem is with initial values. With beta.4 I didn't have this problem. Does anyone else have the same problem with beta.6?

[anemicsoftware]

I can confirm that initial values are no longer working in beta.5 or beta.6.

beta.4 does work and has the "must have a single child element." issue.

All beta versions are very slow/sluggish when filling text fields, with or without validation.

[jannikbuschke]

In this sample app https://github.com/jannikbuschke/formik-antd/tree/beta/3.0/sample-app I use beta.6 and initial values work (at least tested for Input)
It is a little bit sluggish, but not extremely slow.

[tmiroslav97]

I will try to explain better. Initial values are binded to fields but they are not visible when form is opened, if I try to submit that form everything is fine they are corectly sent to api client for instance. I will try to test this more deeper.

[jannikbuschke]

Can you check if this happens for you in this example? https://github.com/jannikbuschke/formik-antd/tree/beta/3.0/sample-app becase I dont see this behavior.

[tmiroslav97]

@jannikbuschke Hi, I checked everyting now and I know where is the problem, but I don't know why. All my form components are wrapped with FormItem, and every component that has FormItem cannot show initial value. In your example you only have field userName wrapped with FormItem or in your case exactly Form.Item. If you try to set initial value for userName you will see that this value is not displayed on your sample-app-form. So maybe there is a problem with FormItem component. Also, when I wrote here first time that I noticed this warning Warning: [antd: Form.Item] A Form.Item with a name prop must have a single child element. everything worked fine, but only that message has appeared all the time.

[jannikbuschke]

Ok, this probably helps, Ill try to look at it again this evening or this weekend

[jannikbuschke]

Should work now in 3.0.0-beta.7.

[huannn1]

I got this error with antd 5.1.4 and formik-antd 3.0.0-beta.7 when I tried to run React app. Do you have any idea ?

D:\Work\Project\Project\node_modules\antd\es\button\index.js:1
import Button from './button';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Module._compile (D:\Work\Project\Project\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Object.newLoader [as .js] (D:\Work\Project\Project\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (D:\Work\Project\Project\node_modules\formik-antd\src\array-button\index.tsx:3:1)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Module._compile (D:\Work\Project\Project\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Object.newLoader [as .js] (D:\Work\Project\Project\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:950:32)
error Command failed with exit code 1.

[jannikbuschke]

do you use create-react-app (react-scripts)?
Im using vite, and there it seems to work.

In the error I see an "array-button", do you use that? It s a component that is not documented in the Readme, and a little bit hidden. Im wondering if people use these array/table components. As they are probably way less used I can imagine that there are problems.

[huannn1]

I'm using React Starter Kit (master branch) - It supports SSR (Server Side Rendering), and now the boilerplate is no longer maintained.
https://github.com/kriasoft/react-starter-kit/tree/master

I don't use any import with "array-button", I'm not sure because of SSR or not, still trying to figure out the reason
My project was working great with AntD v4.x and formik-antd 2.x

[tmiroslav97]

Should work now in 3.0.0-beta.7.

It seems that everything works know. It works a bit slow but it's fine. Thank you!
If I notice any bug I will report it here.

[ogheneovo12]

I got this error with antd 5.1.4 and formik-antd 3.0.0-beta.7 when I tried to run React app. Do you have any idea ?

D:\Work\Project\Project\node_modules\antd\es\button\index.js:1
import Button from './button';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Module._compile (D:\Work\Project\Project\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Object.newLoader [as .js] (D:\Work\Project\Project\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (D:\Work\Project\Project\node_modules\formik-antd\src\array-button\index.tsx:3:1)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Module._compile (D:\Work\Project\Project\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Object.newLoader [as .js] (D:\Work\Project\Project\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:950:32)
error Command failed with exit code 1.

Same Error With Nextjs

[ogheneovo12]

formik-antd/components/src/array-button/index.tsx

Line 3 in a3f41ee

import Button, { ButtonProps } from 'antd/es/button'

why is button a default import here, this is the origin of the above bug itself

[thraizz]

All issues with imports here seem unrelated to formik-antd and are rather related to wrong configurations of bundlers.
Works fine for me in NextJS, check your bundler configuration or create a new nextjs project and adapt the configuration from there @ogheneovo12

[ogheneovo12]

running in dev mode works fine, the error only comes up when running build @thraizz

[ogheneovo12]

i removed formik-antd and i was able to build, started afresh added formik-antd and same error pops up on build

`info - Collecting page data .C:\Users\X30\Documents\codes\bridge-admin\node_modules\antd\es\button\index.js:1
import Button from './button';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at compileFunction ()
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (C:\Users\X30\Documents\codes\bridge-admin\node_modules\formik-antd\lib\array-button\index.js:7:40)

Build error occurred
Error: Failed to collect page data for /login
at C:\Users\X30\Documents\codes\bridge-admin\node_modules\next\dist\build\utils.js:963:15
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
type: 'Error'
}
info - Collecting page data .`

[Lolinpiko]

Any update on this issue ?
I currently got the same error when trying to use version 3.0.0-beta7 with a fresh nextjs config.

[jannikbuschke]

I dont have time to really work on this. If someone can create a repro, maybe even in the form of a repository than maybe I could play around with it, or others might be able to pick it up from there

[Lolinpiko]

We made a fork to try and fix it, the only change to make is the import in array-button component, as stated by @ogheneovo12.

in the components/src/array-button/index.tsx you should replace

import Button, { ButtonProps } from 'antd/es/button'

with

import { Button } from 'antd'
import { ButtonProps } from 'antd/es/button'

Forked commit

[jannikbuschke]

Ok, fixed in beta 8

[elvinvibecartons]

When trying to use the switch component defined like this
<Switch name="bswitch" onChange={handleChange} />
I get an error "TypeError: Cannot read properties of undefined (reading 'bswitch')".
Swapping the import from formik-antd to antd without changing anything else fixed the issue. Unsure what's causing it but this is new to 3.0.0 I think.

[valentinbeggi]

Hey
I'm getting a clone.weekday is not a function using the DatePicker composant, maybe fixed by dayjs.extend(weekday); ?

EDIT:

I tried manually adding it to this package through my node_modules, along with the localeData plugin and it seems to work now.

[hoanganhtran1010]

Any update on this issue ?
I currently got the same error when trying to use version 3.0.0-beta7 with a fresh nextjs config.

Still get this issue on version 3.0.0-beta8, values only show if i set initialValue for FormItem component.
Update:

• I downgrade to antd version 5.4.2 work
• Maybe the change below in antd 5.4.3 made this issue:
  Optimize Form field binding, now will ignore comments in Form.Item as subcomponents #41771

[plsdev89]

up 👍

[thj-dk]

Any ideas on how se solve this Form.Item issue mentioned by @hoanganhtran1010 so we can use the latest antd version?

[thj-dk]

Did any one solve this issue?

[TerminusMKB]

I don't know exactly why, but I got value initialization working after I gave each Form.Item valuePropName={"_"} (actually any value other than "value")
This is strange, because the AntDesign documentation says that for Checkbox and Switch, for example, valuePropName should be "check"
But it works
Maybe this will point someone on the right way to fix the problem

[jannikbuschke]

I think I fixed it, can you check with the latest version?

[thj-dk]

Sorry for not getting back to you earlier @jannikbuschke, but thank you for this. It seems to be working with the latest version of antd.

[YassineDM]

@thj-dk So which version should we use with antd 5, 3.0.0-beta.9?

[thj-dk]

@thj-dk So which version should we use with antd 5, 3.0.0-beta.9?

Yes. That's what we're using now with the latest version of antd.

[thj-dk]

@jannikbuschke turns out that there's some issues with Input.TextArea when using antd 5.13.2 and formik-antd 3.0.0-beta.9. Initial values doesn't work.