{"id":18144,"library":"babel-helper-builder-react-jsx","title":"babel-helper-builder-react-jsx","description":"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.","status":"maintenance","version":"6.26.0","language":"javascript","source_language":"en","source_url":"https://github.com/babel/babel/tree/master/packages/babel-helper-builder-react-jsx","tags":["javascript"],"install":[{"cmd":"npm install babel-helper-builder-react-jsx","lang":"bash","label":"npm"},{"cmd":"yarn add babel-helper-builder-react-jsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-helper-builder-react-jsx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for AST node construction and type checking.","package":"babel-types","optional":false},{"reason":"Used for utility functions like cloneDeep.","package":"lodash","optional":false}],"imports":[{"note":"Default export only; named exports not available.","wrong":"const { default } = require('babel-helper-builder-react-jsx')","symbol":"default","correct":"import buildReactJSX from 'babel-helper-builder-react-jsx'"}],"quickstart":{"code":"import buildReactJSX from 'babel-helper-builder-react-jsx';\nimport * as t from 'babel-types';\n\nconst builder = buildReactJSX({\n  pre(state) {\n    state.tagName = state.tagName === 'div' ? 'span' : state.tagName;\n  },\n  post(state) {\n    // Tag is already transformed into a call expression in state.call\n  }\n});\n\n// Build a JSX element in a visitor\nconst visitor = {\n  JSXElement(path) {\n    const state = {\n      tagExpr: path.node.openingElement.name,\n      tagName: path.node.openingElement.name.name,\n      args: [path.node.children.flatMap(child => {\n        if (t.isJSXText(child)) {\n          return t.stringLiteral(child.value);\n        }\n        return child; // transformed elsewhere\n      })]\n    };\n    const result = builder(state);\n    path.replaceWith(result);\n  }\n};","lang":"javascript","description":"Demonstrates how to use the builder to replace JSXElement nodes with call expressions, including pre/post hooks."},"warnings":[{"fix":"Use @babel/plugin-transform-react-jsx directly for JSX transformation.","message":"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.","severity":"gotcha","affected_versions":">=6.0.0"},{"fix":"Use @babel/plugin-transform-react-jsx or @babel/plugin-transform-react-jsx-development in Babel 7+.","message":"This package is deprecated in favor of @babel/helper-builder-react-jsx (Babel 7+) or the new JSX transform (React 17+).","severity":"deprecated","affected_versions":"<=6.26.0"},{"fix":"Ensure args is an array of AST nodes (not strings or objects).","message":"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.","severity":"gotcha","affected_versions":">=6.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"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+.","cause":"Package not installed or trying to use with Babel 7+ where it was renamed.","error":"Cannot find module 'babel-helper-builder-react-jsx'"},{"fix":"Use default import: import buildReactJSX from 'babel-helper-builder-react-jsx'","cause":"Importing the default export incorrectly (e.g., using { buildReactJSX } import syntax).","error":"TypeError: builder is not a function"},{"fix":"Use ESM import: import buildReactJSX from 'babel-helper-builder-react-jsx'","cause":"Trying to use CommonJS require in an ESM context.","error":"ReferenceError: require is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}