Babel React Components

1.1.0 verified Sat Apr 25 auth: no javascript

Utility library for identifying and working with React components in Babel AST transformations. Version 1.1.0 provides helper functions like isReactComponentClass to detect React component classes in Babel plugin development. Limited release cadence; focuses on providing reliable helpers for Babel plugin authors. Differentiates by specifically targeting React class components detection with accurate Babel path checking.

Common errors

error TypeError: isReactComponentClass is not a function ↓

cause Importing incorrectly, likely using default import or CJS require.

fix

Use named import: import { isReactComponentClass } from 'babel-react-components'

error Cannot find module 'babel-react-components' ↓

cause Package not installed or incorrectly referenced in tsconfig.json paths.

fix

Run npm install babel-react-components or add to package.json dependencies.

error TypeScript error: 'isReactComponentClass' cannot be used as a value because it was imported using 'import type'. ↓

cause Using type-only import for a runtime function.

fix

Change to regular import: import { isReactComponentClass } from 'babel-react-components'

Warnings

gotcha The function only works on Babel AST paths, not on regular JavaScript objects or source code strings. ↓

fix Ensure you pass a Babel NodePath object, not a node or code string.

gotcha May not detect functional components or components created with React.forwardRef or React.memo. ↓

fix Use additional checks for ArrowFunctionExpression, FunctionDeclaration, CallExpression with member expression (React.forwardRef), etc.

Install

npm install babel-react-components

yarn add babel-react-components

pnpm add babel-react-components

Imports

isReactComponentClass

wrong

const isReactComponentClass = require('babel-react-components').isReactComponentClass

correct

import { isReactComponentClass } from 'babel-react-components'

ESM only; CJS require not supported.

isReactComponentClass (type import)

wrong

import { isReactComponentClass } from 'babel-react-components'

correct

import type { isReactComponentClass } from 'babel-react-components'

If using TypeScript, prefer type import to avoid runtime bundling.

default import

wrong

import BabelReactComponents from 'babel-react-components'

correct

import * as BabelReactComponents from 'babel-react-components'

No default export; must use namespace or named imports.

Quickstart

Shows how to use isReactComponentClass in a Babel plugin visitor to detect React class components.

import { isReactComponentClass } from 'babel-react-components';

export default function babelPlugin() {
  return {
    visitor: {
      ClassDeclaration(path) {
        if (isReactComponentClass(path)) {
          console.log('Found React component:', path.node.id.name);
        }
      }
    }
  };
}