babel-plugin-import - not work

[gromov-io]

[jannikbuschke]

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.

[jannikbuschke]

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

[jannikbuschke]

@gromov-io can you verify if it now works?

[franknoel]

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"
    ],
]

[jannikbuschke]

Maybe try "style": "css" and "libraryDirectory":"es" for both imports (like here https://github.com/jannikbuschke/cra-antd-x/blob/master/config-overrides.js)

[jannikbuschke]

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.

[gromov-io]

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"

[jannikbuschke]

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

[mikedotJS]

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.

[jannikbuschke]

maybe try with "style":"css" and "libraryDirectory":"es"

https://github.com/jannikbuschke/formik-antd#advanced-setup