Support for Ant Design 5

YassineDM commented 2 years ago

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

amirshahamiri commented 1 year ago

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

imamaad commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Or feel free to open a PR

jannikbuschke commented 1 year ago

Added storybook and started working on support for v5: https://github.com/jannikbuschke/formik-antd/pull/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 commented 1 year ago

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 commented 1 year ago

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

imamaad commented 1 year ago

keepOffset does not work in DatePicker.

imamaad commented 1 year ago

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 commented 1 year ago

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

imamaad commented 1 year ago

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<Dayjs> & { 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<Dayjs> & { 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}</FastField>

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 commented 1 year ago

new version 3.0.0-beta.3

imamaad commented 1 year ago

Error when using Datepicker

jannikbuschke commented 1 year ago

new version 3.0.0-beta.4

tmiroslav97 commented 1 year ago

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 commented 1 year ago

@tmiroslav97 can you show some code?

jannikbuschke commented 1 year ago

3.0.0-beta.6 landed Feedback would be appreciated

tmiroslav97 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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

jannikbuschke commented 1 year ago

Should work now in 3.0.0-beta.7.

huannn1 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

https://github.com/jannikbuschke/formik-antd/blob/a3f41ee0e6bfc170c8574d779019791f540788c3/components/src/array-button/index.tsx#L3

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

thraizz commented 1 year ago

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 commented 1 year ago

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

ogheneovo12 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Ok, fixed in beta 8

elvinvibecartons commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

up 👍

thj-dk commented 1 year ago

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

thj-dk commented 1 year ago

Did any one solve this issue?

TerminusMKB commented 1 year ago

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 commented 1 year ago

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

thj-dk commented 10 months ago

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 commented 10 months ago

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

thj-dk commented 10 months ago

@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 commented 10 months ago

@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.

jannikbuschke / formik-antd

Support for Ant Design 5 #204