{"id":15420,"library":"babel-plugin-component","title":"Babel Plugin Component Modularization","description":"babel-plugin-component is a Babel plugin designed to optimize bundle sizes for component-based UI libraries by transforming ES module import statements into modular CommonJS `require` calls. It automatically handles importing only the necessary components and their corresponding styles, preventing the inclusion of an entire library. The current stable version is 1.1.1, published in 2018, indicating a lack of active development or a slow release cadence. Its primary differentiator is its extensive configuration options for handling various component and style library directory structures, including support for independent theme packages and custom style paths, making it highly adaptable for libraries like Element UI and Ant Design. This plugin works by rewriting import paths at compile time, reducing the amount of JavaScript and CSS shipped to the client.","status":"abandoned","version":"1.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/ElementUI/babel-plugin-component","tags":["javascript","babel-plugin"],"install":[{"cmd":"npm install babel-plugin-component","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-component","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-component","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Babel transformation runtime.","package":"@babel/core","optional":false},{"reason":"Commonly used for integrating Babel with webpack.","package":"babel-loader","optional":true}],"imports":[{"note":"This plugin is configured in Babel configuration files (like `.babelrc` or `babel.config.js`) using its short string name `\"component\"`, not imported as a JavaScript module in application code. Options are passed as the second element in the plugin's array.","wrong":"{\n  \"plugins\": [\n    \"babel-plugin-component\",\n    {\n      \"libraryName\": \"element-ui\"\n    }\n  ]\n}","symbol":"\"component\"","correct":"{\n  \"plugins\": [\n    [\"component\", {\n      \"libraryName\": \"element-ui\",\n      \"style\": true\n    }]\n  ]\n}"}],"quickstart":{"code":"// .babelrc or babel.config.js\nmodule.exports = {\n  plugins: [\n    [\"component\", {\n      libraryName: \"your-component-library\",\n      style: true, // or 'css', or a custom path like 'your-component-library/lib/style.css'\n      camel2Dash: true // Converts 'ComponentName' to 'component-name'\n    }]\n  ]\n};\n\n// src/App.js (example usage in application code)\nimport { Button, Alert } from 'your-component-library';\n\nfunction App() {\n  return (\n    <div>\n      <Button>Click me</Button>\n      <Alert type=\"info\" message=\"Hello\"></Alert>\n    </div>\n  );\n}\n\n// Transformed output (simplified conceptual example):\n// var Button = require('your-component-library/lib/button');\n// require('your-component-library/lib/button/style.css');\n// var Alert = require('your-component-library/lib/alert');\n// require('your-component-library/lib/alert/style.css');","lang":"javascript","description":"Demonstrates how to configure 'babel-plugin-component' in a Babel configuration file to enable modular imports and style loading for a hypothetical component library."},"warnings":[{"fix":"For Babel 6, use `npm i babel-plugin-component@0 -D`. For Babel 7+, use `npm i babel-plugin-component -D` (which installs 1.x).","message":"Version 0.x of `babel-plugin-component` is for Babel 6, while version 1.x (and later) is designed for Babel 7 and newer. Installing the wrong version for your Babel setup will lead to compilation errors.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"If your component files use camelCase naming, set `camel2Dash: false` in your plugin options: `[\"component\", { libraryName: \"your-lib\", camel2Dash: false }]`.","message":"The `camel2Dash` option defaults to `true`. This means `import { MyComponent } from 'lib'` will attempt to resolve to `lib/my-component`. If your component filenames are not dash-cased (e.g., `lib/MyComponent.js`), this will result in module not found errors.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Carefully review your component library's actual directory structure and adjust `libDir`, `root`, `style`, `styleLibraryName`, and `styleLibrary.path` options to precisely match it. Use absolute paths for `style` if it's external.","message":"Configuring style imports, especially with `styleLibraryName` or the `styleLibrary` object, can be complex and prone to errors. Incorrect paths or structures will prevent styles from loading, or import the wrong styles.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Consider alternatives like `babel-plugin-import` if you are working on a new project or encountering compatibility issues with modern tooling. Evaluate the risk of using an unmaintained dependency for long-term projects.","message":"This plugin appears to be abandoned, with the last publish date being May 8, 2018. It may not receive updates for new Babel versions, ECMAScript features, or security fixes, potentially leading to compatibility issues or missed optimizations in modern build environments.","severity":"gotcha","affected_versions":"<=1.1.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `babel-plugin-component` is installed (`npm i babel-plugin-component -D`). In your `.babelrc` or `babel.config.js`, reference it as `[\"component\", options]`, not `[\"babel-plugin-component\", options]`.","cause":"The plugin is either not installed, or it's referenced incorrectly in the Babel configuration. You must use the string 'component', not the full package name 'babel-plugin-component'.","error":"Error: Plugin 'component' not found"},{"fix":"Check the `style` option: if it's `true`, ensure `lib/componentName/style.css` exists. If `style: 'css'`, ensure `lib/componentName/index.css` or similar exists. Verify `libDir` matches your library's output directory. If component names are camelCase, set `camel2Dash: false` if your library's files are not dash-cased.","cause":"The plugin attempted to import a style file at a path that does not exist. This often happens due to incorrect `style` or `libDir` options, or a mismatch between the plugin's default path transformation (e.g., `camel2Dash`) and the actual file structure.","error":"Module not found: Error: Can't resolve 'your-component-library/lib/my-component/style.css'"},{"fix":"Given the plugin's abandonment, there may be no direct fix for newer Babel versions or syntax. You might need to downgrade Babel, transpile newer syntax before this plugin runs (if possible), or migrate to a more actively maintained plugin like `babel-plugin-import`.","cause":"This error typically indicates a plugin compatibility issue with a newer version of Babel, or with specific AST nodes introduced by newer ECMAScript features (e.g., optional chaining, nullish coalescing) that the plugin doesn't correctly parse or transform.","error":"TypeError: Cannot read property 'map' of undefined (or similar Babel AST manipulation errors)"}],"ecosystem":"npm"}