{"id":19077,"library":"babel-plugin-import","title":"babel-plugin-import","description":"A Babel plugin that transforms modular imports (e.g., import { Button } from 'antd') into individual require/import calls for only the used components and their styles, reducing bundle size. Version 1.13.8 is the latest stable release, maintained by the Ant Design team. It supports customizable library names, directories, style imports (including CSS, SASS/LESS, or none), and camelCase-to-kebab-case conversion. Key differentiators: works with antd, antd-mobile, lodash, material-ui, and many other libraries; supports styleLibraryDirectory for custom style layouts; and is widely adopted in the React ecosystem for on-demand loading without tree-shaking.","status":"active","version":"1.13.8","language":"javascript","source_language":"en","source_url":"https://github.com/ant-design/babel-plugin-import","tags":["javascript","babel-plugin","antd"],"install":[{"cmd":"npm install babel-plugin-import","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-import","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for Babel plugin compatibility","package":"@babel/core","optional":false}],"imports":[{"note":"Used as a Babel plugin in .babelrc or babel.config.js. No direct JavaScript import.","wrong":"const plugin = require('babel-plugin-import') // no named export","symbol":"default (plugin)","correct":"module.exports = { plugins: [['import', options]] }"},{"note":"Plugin automatically transforms named imports from the library to individual module imports. No explicit call needed.","wrong":"import Button from 'antd/lib/button'; // defeats purpose of plugin","symbol":"import { Button } from 'antd'","correct":"import { Button } from 'antd'; // transformed to individual imports"},{"note":"Options must be passed as second element of an array within the plugins array.","wrong":"{\n  \"plugins\": [\"import\", { \"libraryName\": \"antd\" }] // missing nested array","symbol":"configure via .babelrc","correct":"{\n  \"plugins\": [[\"import\", { \"libraryName\": \"antd\", \"style\": \"css\" }]]\n}"}],"quickstart":{"code":"// .babelrc or babel.config.js\nmodule.exports = {\n  plugins: [\n    ['import', {\n      libraryName: 'antd',\n      style: 'css', // or true for LESS source\n    }],\n  ],\n};\n\n// Your React component\nimport { Button, DatePicker } from 'antd';\n// Transforms to:\n// var _button = require('antd/lib/button');\n// require('antd/lib/button/style/css');\n// var _datePicker = require('antd/lib/date-picker');\n// require('antd/lib/date-picker/style/css');\n\nconst App = () => (\n  <div>\n    <Button>Click me</Button>\n    <DatePicker />\n  </div>\n);","lang":"javascript","description":"Configures babel-plugin-import for antd with CSS style imports, showing the transformation of a component import."},"warnings":[{"fix":"Instead of [\n  {\"libraryName\":\"antd\"},\n  {\"libraryName\":\"antd-mobile\"}\n], define two plugin entries with unique names: [['import',{libraryName:'antd'},'antd'], ['import',{libraryName:'antd-mobile'},'antd-mobile']]","message":"babel-plugin-import does not work with Babel 7+ when using array of options; use separate plugin entries instead.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use style: true to import LESS/Sass source files and allow tree-shaking of styles.","message":"Setting style: 'css' imports pre-built CSS files; prefer style: true to import LESS source files for smaller bundle.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Always use named imports from the library root (e.g., import { Button } from 'antd') to allow the plugin to work.","message":"Plugin does not transform direct imports like import Button from 'antd/lib/button'; it only transforms import { Button } from 'antd'.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add a third string argument to each plugin entry for uniqueness, e.g., ['import', {...}, 'antd'].","message":"In Babel 7+, the plugin name must be unique when using multiple instances; otherwise, the second instance overrides the first.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use ES module imports (import ... from 'antd') instead of CommonJS require.","message":"The plugin transforms only import statements, not require() calls (e.g., const Button = require('antd').Button).","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Either use separate plugin entries or pass a single options object. For multiple libraries: [['import', {libraryName:'antd'}, 'antd'], ['import', {libraryName:'antd-mobile'}, 'antd-mobile']]","cause":"Using an array of options in Babel 7+ like plugins: [['import', [{...}, {...}]]]","error":"Error: [BABEL] unknown: You gave us a visitor for the node type \"Program\" but it's not a valid type (While processing: ...)"},{"fix":"Run: npm install babel-plugin-import --save-dev","cause":"babel-plugin-import is not installed or not in node_modules.","error":"Error: Cannot find module 'babel-plugin-import'"},{"fix":"Verify the library name and style path. For antd, use libraryName: 'antd' and style: 'css' for built CSS, or style: true for LESS source.","cause":"The specified style path does not exist; often because libraryName is incorrect or style option is misconfigured.","error":"Module not found: Error: Can't resolve 'antd/lib/button/style'"},{"fix":"Update babel-plugin-import to the latest version (1.13.8) and ensure @babel/core is >=7.0.0.","cause":"The plugin tries to traverse an AST node that is not supported, often due to an incompatible Babel version.","error":"Transform error: Cannot read property 'someMethod' of undefined at ... (related to babel-plugin-import)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}