babel-plugin-jsx

1.2.0 verified Sat Apr 25 auth: no javascript maintenance

A Babel plugin that transforms JSX into a generic intermediate representation (JSX-IR) rather than React.createElement calls. Version 1.2.0 is the current stable release with no active development since 2017. The plugin outputs plain objects with tag, props, and children fields, making it renderer-agnostic. Key differentiators: it does not require React, supports scope capture for variable resolution, and can be combined with custom renderers from the jsx-ir ecosystem.

Common errors

error ReferenceError: [BABEL] unknown: Plugin . was not found ↓

cause Trying to require the plugin directly and pass as object instead of using string reference.

fix

Use 'plugins: ["babel-plugin-jsx"]' or require the generator submodule: 'plugins: [require("babel-plugin-jsx/gen")()]'

error Error: Couldn't find scope for tag: SomeComponent ↓

cause Using captureScope: true without having the variable SomeComponent defined in scope or listed in builtins.

fix

Define the variable in scope, add it to builtins array, or set throwOnMissing: false

error TypeError: Cannot read property 'name' of undefined ↓

cause Using babel-plugin-jsx with Babel 7 where the plugin API changed.

fix

Use Babel 6 or replace the plugin with a Babel 7 compatible JSX-IR plugin.

Warnings

gotcha Babel 6+ blacklist option is deprecated; use 'only' or 'exclude' instead. ↓

fix Use 'exclude' option or upgrade to Babel 7+ and use 'overrides'

deprecated The 'blacklist' option is no longer supported in Babel 7. Plugin may not work with Babel 7. ↓

fix Upgrade to a Babel 7 compatible plugin or use Babel 6.

gotcha Scope capture requires variables to be in scope or defined as builtins; missing variables cause compilation error by default. ↓

fix Set throwOnMissing: false to defer to runtime error or ensure all JSX tags are in scope.

gotcha Plugin is designed for Babel 6; using with Babel 7 may cause unexpected errors due to API changes. ↓

fix Use Babel 6 or find a Babel 7 compatible alternative.

Install

npm install babel-plugin-jsx

yarn add babel-plugin-jsx

pnpm add babel-plugin-jsx

Imports

default plugin

wrong

var plugin = require('babel-plugin-jsx'); babel.transform(code, { plugins: [plugin] })

correct

babel.transform(code, { plugins: ['babel-plugin-jsx'] })

The plugin is a function that must be used as a string reference in babel configuration, not required directly.

plugin generator

wrong

var plugin = require('babel-plugin-jsx').gen({ captureScope: true })

correct

var jsxGen = require('babel-plugin-jsx/gen'); var plugin = jsxGen({ captureScope: true })

The generator is required from 'babel-plugin-jsx/gen', not a property of the main module.

babel-plugin-jsx/gen
wrong
```
import { gen } from 'babel-plugin-jsx'
```
correct
```
import jsxGen from 'babel-plugin-jsx/gen'
```
Named import from main module does not work; use default import from subpath.

Quickstart

Transforms JSX code into JSX-IR object using the plugin generator with captureScope disabled.

const babel = require('babel-core');
const jsxGen = require('babel-plugin-jsx/gen');
const code = '<div className="box"><List><ListItem index={1} /></List></div>';
const result = babel.transform(code, {
  plugins: [jsxGen({ captureScope: false })],
  blacklist: ['react']
});
console.log(result.code);
// Output: JSX-IR object