Support for Ant Design 5 about formik-antd HOT 51 OPEN

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

from formik-antd.

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

from formik-antd.

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.

from formik-antd.

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.

from formik-antd.

Ok, fixed in beta 8

from formik-antd.

Did any one solve this issue?

from formik-antd.

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

from formik-antd.

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

from formik-antd.

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

from formik-antd.

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

from formik-antd.

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

from formik-antd.

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 ?

from formik-antd.

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

from formik-antd.

Or feel free to open a PR

from formik-antd.

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.

from formik-antd.

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?

from formik-antd.

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

from formik-antd.

keepOffset does not work in DatePicker.

from formik-antd.

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}

from formik-antd.

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

from formik-antd.

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.

from formik-antd.

new version 3.0.0-beta.3

from formik-antd.

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)

from formik-antd.

new version 3.0.0-beta.4

from formik-antd.

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!

from formik-antd.

@tmiroslav97 can you show some code?

from formik-antd.

3.0.0-beta.6 landed
Feedback would be appreciated

from formik-antd.

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

from formik-antd.

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.

from formik-antd.

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.

from formik-antd.

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.

from formik-antd.

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

from formik-antd.

Should work now in 3.0.0-beta.7.

from formik-antd.

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.

from formik-antd.

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.

from formik-antd.

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

from formik-antd.

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.

from formik-antd.

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

from formik-antd.

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

from formik-antd.

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

from formik-antd.

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

from formik-antd.

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

from formik-antd.

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

from formik-antd.

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.

from formik-antd.

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.

from formik-antd.

up 👍

from formik-antd.

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

from formik-antd.

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

from formik-antd.

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.

from formik-antd.

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

from formik-antd.