Warning about using a whole package of antd is not resolved with babel-import-plugin. Antd bug or incorect usage of babel import plugin?

user_15079691 0
Viewed 1621

When I try make import like this in ant design with react

 import {UserOutlined, LockOutlined} from '@ant-design/icons'

I get next warning

"You are using a whole package of antd, please use
https://www.npmjs.com/package/babel-plugin-import 
to reduce app bundle size warning or what wrong with my babelrc?"

I try to fix it with bubble-import-plugin but it dont work
Maybe I use it wrong way?

*in client folder I have react app and in package.json - babel blugin for import and also babelrc config with next settings

{
  "plugins": [
    ["import", {"libraryName": "antd"}]
  ]
}
ant-design-pro antd reactjs
3 Answers

In my case was problem solved by upgrading to the new antd version - 4.14.0. Then the warning disappeared. Also check, if you have your .babelrc file in root of your project (the place, where is package.json file)

user_65299320
user_150796910

I realized that the issue at least in my case is that I was importing a component differently:

This cleared the warning:

import { Layout } from "antd"

This caused the warning to show:

import { Layout } from "antd/lib"

user_110810310
Related