Babel Plugin Component Modularization

Common errors

• Error: Plugin 'component' not found

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

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

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

Warnings

• breaking 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.
  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).
• gotcha 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.
  Fix: If your component files use camelCase naming, set `camel2Dash: false` in your plugin options: `["component", { libraryName: "your-lib", camel2Dash: false }]`.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install babel-plugin-component npm
• yarn add babel-plugin-component yarn
• pnpm add babel-plugin-component pnpm

Imports

• "component"
  wrong:

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

  correct:

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

  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.

Quickstart

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');