How do I use .babelrc to get babel-plugin-import working for antd?

Question

I'm new to react, babel, and antd.

I installed react and started a project using create-react-app. I installed antd (ant.design). It suggests using babel-plugin-import, so I installed that too.

If I interpret it right, the usage documentation for babel-plugin-import says to put this in a .babelrc file:

{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "style": true
    }]
  ]
}

I'm having trouble getting it to work. My web console still has the warning:

You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

I didn't have a .babelrc file in my project's directory, so I created one with the above contents and restarted my server (npm start). That didn't work, so I created one in myProject/node_modules/babel_plugin_import but that doesn't work either.

Where is that code snippet supposed to go?

At the bottom of https://github.com/ant-design/babel-plugin-import it says

babel-plugin-import will be not working if you add the library in webpack config vender.

But I don't know what that means.

I asked another question here: How to get antd working with app created via create-react-app? Maybe this problem has something to do with my project created via create-react-app??

Answer 1

[Update 2018-02-06: The answer is still correct, but there is a better alternative now, which is to use react-app-rewired. This is also documented in the link.]

You need to follow the instructions in https://ant.design/docs/react/use-with-create-react-app#Import-on-demand to a T.

You should not create ant .babelrc files or similar. When using CRA all babel config is handled inside the webpack config files.

First clean up the config files you created, and make sure you have babel-plugin-import installed.

Then eject your app: npm run eject

This will give you a config folder with 2 webpack config files for dev/prod environments.

Open those files and locate the place where you need to insert the plugins property as documented on the instructions page.