Registry / web-framework / babel-plugin-transform-react-jsx

babel-plugin-transform-react-jsx

library6.24.1jsnpmunverified

This package, `babel-plugin-transform-react-jsx` version 6.24.1, is the legacy plugin for transforming JSX syntax into `React.createElement` calls (or custom pragma calls) within Babel 6 projects. It was the standard way to process JSX for JavaScript applications using Babel's previous major version. This plugin is no longer actively maintained and has been superseded by `@babel/plugin-transform-react-jsx` (and often integrated via `@babel/preset-react`) in Babel 7 and later. Projects currently on Babel 7 or 8 should use the scoped `@babel/plugin-transform-react-jsx` to ensure compatibility with modern React runtimes (classic or automatic) and the latest JavaScript features. This package is relevant only for maintaining older codebases that are specifically pinned to Babel 6.

web-framework

npm install babel-plugin-transform-react-jsx

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-TRANS

babel-plugin-transform-react-jsx

web-frameworkjavascriptv6.24.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

babel-plugin-transform-react-jsx

✓ { "plugins": ["transform-react-jsx"] }

✗ import transformReactJSX from 'babel-plugin-transform-react-jsx'; // Plugins are configured, not imported in source code

Babel plugins are configured in a Babel configuration file (e.g., `.babelrc` or `babel.config.json`), not imported into application source code. The string 'transform-react-jsx' refers to the plugin name.

transform

✓ const babel = require('babel-core'); const code = 'const element = <div>Hello</div>;'; babel.transform(code, { plugins: ['transform-react-jsx'] });

✗ import { transform } from 'babel-core'; // Babel 6 primarily used CommonJS for programmatic API

For programmatic usage with Babel 6, `babel-core` is typically imported using `require`. The plugin is passed as a string in the `plugins` array.

options.pragma

✓ { "plugins": [ ["transform-react-jsx", { "pragma": "h" }] ] }

The `pragma` option is configured within the plugin array in your Babel config to specify a custom function for JSX element creation, instead of the default `React.createElement`.

This quickstart demonstrates how to set up `babel-plugin-transform-react-jsx` in a Babel 6 project to transform JSX syntax, including `pragma` and `useBuiltIns` options, for a simple React component.

{ "name": "my-babel-6-app", "version": "1.0.0", "devDependencies": { "babel-cli": "^6.0.0", "babel-core": "^6.0.0", "babel-plugin-transform-react-jsx": "^6.0.0" }, "scripts": { "build": "babel src --out-dir lib" } } // .babelrc { "plugins": [ ["transform-react-jsx", { "pragma": "React.createElement", "useBuiltIns": true }] ] } // src/app.js import React from 'react'; function App() { return ( <div className="container"> <h1>Hello, Babel 6 JSX!</h1> <p>This is an example of JSX transformed by `babel-plugin-transform-react-jsx`.</p> </div> ); } export default App;

Debug

Known issues

breakingThis `babel-plugin-transform-react-jsx` package is for Babel 6 and is considered abandoned. For Babel 7 and newer projects, you MUST use the `@babel/plugin-transform-react-jsx` package (or `@babel/preset-react`) for correct and up-to-date JSX transformation. Using this older package with Babel 7+ will lead to configuration errors or unexpected behavior.

fix

Migrate to Babel 7+ and install `@babel/plugin-transform-react-jsx` or `@babel/preset-react` (recommended). Remove `babel-plugin-transform-react-jsx` from your `devDependencies` and Babel config.

affects: >=6.x

breakingBabel 7 introduced a new `automatic` runtime for JSX transformations, which does not require `React` to be in scope. This `babel-plugin-transform-react-jsx` (v6) only supports the `classic` runtime, which explicitly converts JSX to `React.createElement` calls, requiring `React` to be imported or globally available.

fix

To use the `automatic` runtime, you must upgrade to Babel 7+ and use `@babel/plugin-transform-react-jsx` with the `runtime: 'automatic'` option, or use `@babel/preset-react`. For Babel 6, ensure `React` is in scope wherever JSX is used.

affects: >=6.x

deprecatedThe `@jsx React.DOM` pragma comment, previously used to specify the JSX factory, was deprecated as of React v0.12 and is not recommended. While Babel 6 might still process it, relying on it is outdated.

fix

Use the `pragma` option in your Babel config for `transform-react-jsx` (e.g., `"pragma": "MyCustomJSXFactory"`) instead of a magic comment if you need a custom JSX factory. Otherwise, rely on the default `React.createElement`.

affects: >=6.x

gotchaConfusing `pragma` and `pragmaFrag` options. This plugin (v6) only supports the `pragma` option for element creation. The `pragmaFrag` option for fragments was introduced in Babel 7's `@babel/plugin-transform-react-jsx` to support `React.Fragment` syntax.

fix

Do not attempt to use `pragmaFrag` with `babel-plugin-transform-react-jsx`. If you need JSX fragment support, upgrade to Babel 7+ and use `@babel/plugin-transform-react-jsx` with `runtime: 'automatic'` or `runtime: 'classic'` and the `pragmaFrag` option configured.

affects: >=6.x

Errors

Common errors & fixes

ReferenceError: React is not defined

JSX is being transformed to `React.createElement` but `React` is not imported or globally available in the scope where JSX is used.

fix

Ensure `import React from 'react';` is present at the top of any file containing JSX, or that `React` is otherwise accessible in the global scope.

Error: Plugin 'transform-react-jsx' not found. It might be a typo or it was removed in the latest version.

Using `babel-plugin-transform-react-jsx` with a Babel 7+ installation, which expects `@babel/plugin-transform-react-jsx`.

fix

Install `@babel/plugin-transform-react-jsx` (`npm install --save-dev @babel/plugin-transform-react-jsx`) and update your Babel configuration to use `'@babel/transform-react-jsx'` or `@babel/preset-react`.

Invalid option 'useBuiltIns'. Did you mean 'useSpread'?

The `useBuiltIns` option for `babel-plugin-transform-react-jsx` (v6) is a boolean that controls whether to use `Object.assign` directly. The error might indicate a typo or misuse of options specific to other Babel versions or plugins.

fix

Review the documentation for `babel-plugin-transform-react-jsx` v6 and ensure `useBuiltIns` is a boolean. If you are targeting modern JavaScript environments where `Object.assign` is natively available, setting it to `true` is usually fine. If the error persists and you are *not* using Babel 6, check the options for `@babel/plugin-transform-react-jsx` which might differ.

Upgrade

Version history

6.24.1latest on npm

Audit

Dependencies

babel-corerequiredRequired as the core Babel transpiler for Babel 6 to load and apply this plugin.

reactoptionalWhile not a direct runtime dependency of the plugin itself, it's implicitly required as the target library for JSX transformation, especially when using the default 'React.createElement' pragma.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/babel/babel ↗

packagehttps://www.npmjs.com/package/babel-plugin-transform-react-jsx ↗