Registry / devops / babel-plugin-component

babel-plugin-component

library1.1.1jsnpmunverified

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.

devops

npm install babel-plugin-component

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-COMPO

babel-plugin-component

devopsjavascriptv1.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

"component"

✓ { "plugins": [ ["component", { "libraryName": "element-ui", "style": true }] ] }

✗ { "plugins": [ "babel-plugin-component", { "libraryName": "element-ui" } ] }

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.

Demonstrates how to configure 'babel-plugin-component' in a Babel configuration file to enable modular imports and style loading for a hypothetical component library.

// .babelrc or babel.config.js module.exports = { plugins: [ ["component", { libraryName: "your-component-library", style: true, // or 'css', or a custom path like 'your-component-library/lib/style.css' camel2Dash: true // Converts 'ComponentName' to 'component-name' }] ] }; // src/App.js (example usage in application code) import { Button, Alert } from 'your-component-library'; function App() { return ( <div> <Button>Click me</Button> <Alert type="info" message="Hello"></Alert> </div> ); } // Transformed output (simplified conceptual example): // var Button = require('your-component-library/lib/button'); // require('your-component-library/lib/button/style.css'); // var Alert = require('your-component-library/lib/alert'); // require('your-component-library/lib/alert/style.css');

Debug

Known issues

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

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

affects: >=1.0.0

gotchaThe `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.

fix

If your component files use camelCase naming, set `camel2Dash: false` in your plugin options: `["component", { libraryName: "your-lib", camel2Dash: false }]`.

affects: >=0.1.0

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

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.

affects: >=0.1.0

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

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.

affects: <=1.1.1

Errors

Common errors & fixes

Error: Plugin 'component' not found

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

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]`.

Module not found: Error: Can't resolve 'your-component-library/lib/my-component/style.css'

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.

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.

TypeError: Cannot read property 'map' of undefined (or similar Babel AST manipulation errors)

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.

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

Upgrade

Version history

1.1.1latest on npm

Audit

Dependencies

@babel/corerequiredRequired for Babel transformation runtime.

babel-loaderoptionalCommonly used for integrating Babel with webpack.

Agent activity

10 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/ElementUI/babel-plugin-component ↗

packagehttps://www.npmjs.com/package/babel-plugin-component ↗