babel-helper-builder-react-jsx

6.26.0 verified Sat Apr 25 auth: no javascript maintenance

Internal Babel helper for building React JSX AST nodes, used by @babel/plugin-transform-react-jsx and related plugins. This package provides a builder function that creates call expressions (e.g., React.createElement) from JSX AST elements. Version 6.26.0 is the latest stable release, part of Babel 6.x, which is now in maintenance mode. Key differentiator: it is strictly a Babel internals helper, not intended for direct consumer use. Alternatives: use @babel/plugin-transform-react-jsx directly for JSX transformation.

Common errors

error Cannot find module 'babel-helper-builder-react-jsx' ↓

cause Package not installed or trying to use with Babel 7+ where it was renamed.

fix

Install the correct version: npm install babel-helper-builder-react-jsx@6 --save-dev, or switch to @babel/helper-builder-react-jsx for Babel 7+.

error TypeError: builder is not a function ↓

cause Importing the default export incorrectly (e.g., using { buildReactJSX } import syntax).

fix

Use default import: import buildReactJSX from 'babel-helper-builder-react-jsx'

error ReferenceError: require is not defined ↓

cause Trying to use CommonJS require in an ESM context.

fix

Use ESM import: import buildReactJSX from 'babel-helper-builder-react-jsx'

Warnings

gotcha This package exposes a single default function that returns an AST builder. It does NOT handle JSX transformation itself; you must use it inside a Babel plugin. ↓

fix Use @babel/plugin-transform-react-jsx directly for JSX transformation.

deprecated This package is deprecated in favor of @babel/helper-builder-react-jsx (Babel 7+) or the new JSX transform (React 17+). ↓

fix Use @babel/plugin-transform-react-jsx or @babel/plugin-transform-react-jsx-development in Babel 7+.

gotcha The builder expects state.args to be an array of arguments for the call expression (e.g., props, children). Incorrectly formed args can produce invalid AST. ↓

fix Ensure args is an array of AST nodes (not strings or objects).

Install

npm install babel-helper-builder-react-jsx

yarn add babel-helper-builder-react-jsx

pnpm add babel-helper-builder-react-jsx

Imports

default

wrong

const { default } = require('babel-helper-builder-react-jsx')

correct

import buildReactJSX from 'babel-helper-builder-react-jsx'

Default export only; named exports not available.

Quickstart

Demonstrates how to use the builder to replace JSXElement nodes with call expressions, including pre/post hooks.

import buildReactJSX from 'babel-helper-builder-react-jsx';
import * as t from 'babel-types';

const builder = buildReactJSX({
  pre(state) {
    state.tagName = state.tagName === 'div' ? 'span' : state.tagName;
  },
  post(state) {
    // Tag is already transformed into a call expression in state.call
  }
});

// Build a JSX element in a visitor
const visitor = {
  JSXElement(path) {
    const state = {
      tagExpr: path.node.openingElement.name,
      tagName: path.node.openingElement.name.name,
      args: [path.node.children.flatMap(child => {
        if (t.isJSXText(child)) {
          return t.stringLiteral(child.value);
        }
        return child; // transformed elsewhere
      })]
    };
    const result = builder(state);
    path.replaceWith(result);
  }
};