{"id":10546,"library":"babel-plugin-transform-react-jsx","title":"Babel 6 JSX Transform Plugin","description":"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.","status":"abandoned","version":"6.24.1","language":"javascript","source_language":"en","source_url":"https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx","tags":["javascript","babel-plugin"],"install":[{"cmd":"npm install babel-plugin-transform-react-jsx","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-transform-react-jsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-transform-react-jsx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as the core Babel transpiler for Babel 6 to load and apply this plugin.","package":"babel-core","optional":false},{"reason":"While 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.","package":"react","optional":true}],"imports":[{"note":"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.","wrong":"import transformReactJSX from 'babel-plugin-transform-react-jsx'; // Plugins are configured, not imported in source code","symbol":"babel-plugin-transform-react-jsx","correct":"{\n  \"plugins\": [\"transform-react-jsx\"]\n}"},{"note":"For programmatic usage with Babel 6, `babel-core` is typically imported using `require`. The plugin is passed as a string in the `plugins` array.","wrong":"import { transform } from 'babel-core'; // Babel 6 primarily used CommonJS for programmatic API","symbol":"transform","correct":"const babel = require('babel-core');\nconst code = 'const element = <div>Hello</div>;';\nbabel.transform(code, { plugins: ['transform-react-jsx'] });"},{"note":"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`.","symbol":"options.pragma","correct":"{\n  \"plugins\": [\n    [\"transform-react-jsx\", {\n      \"pragma\": \"h\"\n    }]\n  ]\n}"}],"quickstart":{"code":"{\n  \"name\": \"my-babel-6-app\",\n  \"version\": \"1.0.0\",\n  \"devDependencies\": {\n    \"babel-cli\": \"^6.0.0\",\n    \"babel-core\": \"^6.0.0\",\n    \"babel-plugin-transform-react-jsx\": \"^6.0.0\"\n  },\n  \"scripts\": {\n    \"build\": \"babel src --out-dir lib\"\n  }\n}\n\n// .babelrc\n{\n  \"plugins\": [\n    [\"transform-react-jsx\", {\n      \"pragma\": \"React.createElement\",\n      \"useBuiltIns\": true\n    }]\n  ]\n}\n\n// src/app.js\nimport React from 'react';\n\nfunction App() {\n  return (\n    <div className=\"container\">\n      <h1>Hello, Babel 6 JSX!</h1>\n      <p>This is an example of JSX transformed by `babel-plugin-transform-react-jsx`.</p>\n    </div>\n  );\n}\n\nexport default App;","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=6.x"},{"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.","message":"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.","severity":"breaking","affected_versions":">=6.x"},{"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`.","message":"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.","severity":"deprecated","affected_versions":">=6.x"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=6.x"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"JSX is being transformed to `React.createElement` but `React` is not imported or globally available in the scope where JSX is used.","error":"ReferenceError: React is not defined"},{"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`.","cause":"Using `babel-plugin-transform-react-jsx` with a Babel 7+ installation, which expects `@babel/plugin-transform-react-jsx`.","error":"Error: Plugin 'transform-react-jsx' not found. It might be a typo or it was removed in the latest version."},{"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.","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.","error":"Invalid option 'useBuiltIns'. Did you mean 'useSpread'?"}],"ecosystem":"npm"}