formik-antd
formik-antd copied to clipboard
babel-plugin-import - not work
Hi @gromov-io ,
Can you share your setup? Maybe you can compare your config with https://github.com/jannikbuschke/cra-antd-x, where babel plugin should work.
I just noticed that it didnt yet fully work. I think I fixed it just now. This is the config: https://github.com/jannikbuschke/cra-antd-x/blob/master/config-overrides.js
@gromov-io can you verify if it now works?
I'm having the same issue with a .babel.rc
file.
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
},
"antd"
],
[
"import",
{
"libraryName": "formik-antd",
"style": true
},
"formik-antd"
],
]
Maybe try "style": "css" and "libraryDirectory":"es" for both imports (like here https://github.com/jannikbuschke/cra-antd-x/blob/master/config-overrides.js)
Also it would be nice if you can clone the boilerplate (cra-antd-x), verify and report back if it works there. Would be kindly appreciated.
Hi, I apologize for the long reply. Here is my config file and it does not work.
PS this only works if the project antd component is already used somewhere
"plugins": [
["import",{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}],
["import",{
"libraryName": "formik-antd'",
"libraryDirectory": "es",
"style": "css"
}, "formik-antd"],
["@babel/plugin-proposal-optional-chaining",{
"loose": false
}]
]
Here is an example input displayed correctly, since I already used "input" from antd in other components. And here is "inputNuber and Checkbox" without styles
And here is how it looks if I connect parts of "antd"
maybe remove the single ' in "libraryName": "formik-antd'",
?
If that does not work, can you try if it works with config-overrids.js exactly as it is done here: https://github.com/jannikbuschke/cra-antd-x/blob/master/config-overrides.js) (not using a json confi as you are doing).
Hey,
Any news on this one? I'm having the same problem and i tried the suggested solutions above.
Current .babelrc
:
[
"import",
{
"libraryName": "antd",
"style": true
},
"antd"
],
[
"import",
{
"libraryName": "formik-antd",
"style": true
},
"formik-antd"
]
On a Next.js app.
When i only use antd
the warning is gone, it appears as soon as i use formik-antd
.
I tried to import components as import Input from 'formik-antd/lib/input'
but it doesn't work either.
maybe try with "style":"css" and "libraryDirectory":"es"
https://github.com/jannikbuschke/formik-antd#advanced-setup