@babel/plugin-transform-react-jsx-development
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.
Example
In
input.jsx
const profile =(
<div>
<img src="avatar.png" className="profile"/>
<h3>{[user.firstName, user.lastName].join(" ")}</h3>
</div>
);
Out
output.js
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
);
Installation
- npm
- Yarn
- pnpm
- Bun
npm install --save-dev @babel/plugin-transform-react-jsx-development
yarn add --dev @babel/plugin-transform-react-jsx-development
pnpm add --save-dev @babel/plugin-transform-react-jsx-development
bun add --dev @babel/plugin-transform-react-jsx-development
Usage
With a configuration file (Recommended)
Without options:
babel.config.json
{
"plugins":["@babel/plugin-transform-react-jsx-development"]
}
With options:
babel.config.json
{
"plugins":[
[
"@babel/plugin-transform-react-jsx-development",
{
"throwIfNamespace":false,// defaults to true
"runtime":"automatic",// defaults to classic
"importSource":"custom-jsx-library"// defaults to react
}
]
]
}
Via CLI
Shell
babel --plugins @babel/plugin-transform-react-jsx-development script.js
Via Node API
JavaScript
require("@babel/core").transformSync("code",{
plugins:["@babel/plugin-transform-react-jsx-development"],
});
Options
It accepts the same options as @babel/plugin-transform-react-jsx.