Babel 6 JSX Transform Plugin

Common errors

• ReferenceError: React is not defined

  cause 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.

  cause 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'?

  cause 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.

Warnings

• breaking This `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.
• breaking Babel 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.
• deprecated The `@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`.
• gotcha Confusing `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.

Install

• npm install babel-plugin-transform-react-jsx npm
• yarn add babel-plugin-transform-react-jsx yarn
• pnpm add babel-plugin-transform-react-jsx pnpm

Imports

• babel-plugin-transform-react-jsx
  wrong:

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

  correct:

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

  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
  wrong:

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

  correct:

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

  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`.

Quickstart

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;