:::info This plugin is included in @babel/preset-react :::

This plugin is a developer version of @babel/plugin-transform-react-jsx. It is designed to provide enhanced validation error messages and precise code location information for debugging React apps. Note that this plugin is intended to be used in a development environment, as it generates significantly more outputs than the production build.

If you are using @babel/preset-react, it will be automatically enabled by the development option so you don't have to install it.

In

const profile = (
  <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName, user.lastName].join(" ")}</h3>
  </div>
);

Out

import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";

const _jsxFileName = "input.jsx";
const profile = _jsxDEV("div", {
  children: [
    _jsxDEV("img", {
      src: "avatar.png",
      className: "profile",
    }, undefined, false, { fileName: _jsxFileName, lineNumber: 3, columnNumber: 5 }, this),
    _jsxDEV("h3", {
      children: [user.firstName, user.lastName].join(" "),
    }, undefined, false, { fileName: _jsxFileName, lineNumber: 4, columnNumber: 5 }, this),
  ]},
  undefined, false, { fileName: _jsxFileName, lineNumber: 2, columnNumber: 3 }, this
);

npm install --save-dev @babel/plugin-transform-react-jsx-development

Without options:

{
  "plugins": ["@babel/plugin-transform-react-jsx-development"]
}

With options:

:::babel8

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx-development",
      {
        "throwIfNamespace": false, // defaults to true
        "runtime": "automatic", // defaults to autoamtic
        "importSource": "custom-jsx-library" // defaults to react
      }
    ]
  ]
}

:::

:::babel7

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx-development",
      {
        "throwIfNamespace": false, // defaults to true
        "runtime": "automatic", // defaults to classic
        "importSource": "custom-jsx-library" // defaults to react
      }
    ]
  ]
}

:::

babel --plugins @babel/plugin-transform-react-jsx-development script.js

require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-react-jsx-development"],
});

:::babel8

boolean, defaults to false.

When true, the plugin generates __source and __self arguments in jsxDEV calls. These were used by older versions of React for development warnings but have been removed since React 19.2.

Set this to true if you are using a React version older than 19.2 or a custom JSX runtime that depends on these arguments.

:::

It accepts the same options as @babel/plugin-transform-react-jsx.