Thanks to visit codestin.com
Credit goes to github.com

Skip to content

@babel/plugin-transform-react-jsx-development still generates source and self arguments for jsxDEV, which were removed in React 19.2Β #17571

@SoheilSalmani

Description

@SoheilSalmani

πŸ’»

  • Would you like to work on a fix?

How are you using Babel?

@babel/cli

Input code

<div className="box">Hello</div>;

Configuration file name

babel.config.json

Configuration

{
  "presets": [["@babel/preset-react", {
    "runtime": "automatic",
    "development": true
  }]]
}

Current and expected behavior

It appears that jsxDEV no longer includes the last two parameters β€” source and self β€” as of the React 19.2 release.

According to this commit, these parameters have been removed from the React source.

However, the @babel/plugin-transform-react-jsx-development plugin still generates these arguments when transpiling JSX.

For example, the following JSX:

<div className="box">Hello</div>;

is transformed into:

var _jsxFileName = "<absolute-path-to-my-jsx-file>";
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
/*#__PURE__*/_jsxDEV("div", {
  className: "box",
  children: "Hello"
}, void 0, false, {
  fileName: _jsxFileName,
  lineNumber: 1,
  columnNumber: 1
}, this);

Since the jsxDEV signature no longer accepts the source and self parameters, I wonder if the plugin should stop generating these arguments when creating calls to jsxDEV.

Environment

System:
OS: macOS 26.0.1
Binaries:
Node: 22.2.0
npm: 10.7.0
pnpm: 10.18.0
npmPackages:
@babel/cli: ^7.28.3 => 7.28.3
@babel/core: ^7.28.5 => 7.28.5
@babel/preset-env: ^7.28.5 => 7.28.5
@babel/preset-react: ^7.28.5 => 7.28.5

Possible solution

Update @babel/plugin-transform-react-jsx-development to stop generating the source and self arguments in calls to jsxDEV, aligning with the React 19.2+ API.

Therefore, the previous snippet would instead compile to the following in development mode:

import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
/*#__PURE__*/_jsxDEV("div", {
  className: "box",
  children: "Hello"
}, void 0, false);

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions