JSX DEV transform is undocumented

[gaearon]

React has two entry points:

• react/jsx-runtime
• react/jsx-dev-runtime

What I didn't realize is that the JSX Babel plugin does not automatically emit the correct one based on environment — and also does not provide an option to switch between them. Instead, the DEV transform is implemented as a completely separate plugin called @babel/plugin-transform-react-jsx-development.

Ideally we need to:

• Document the fact that two plugins exist
• Have a page for @babel/plugin-transform-react-jsx-development on the site (currently it's 404)
• Have @babel/plugin-transform-react-jsx link to it and have a prominent notice that you should use the other one for dev

[JLHwung]

The preset-react does offer a development option to toggle between the DEV transform and the vanilla transform.

The DEV transform has been merged to the JSX plugin in 2020, so the DEV plugin @babel/plugin-transform-react-jsx-development is merely a reexport of the DEV transform in JSX plugin now. We can consider add a development option to the JSX plugin @babel/plugin-transform-react.

What do you think we start to deprecate the DEV plugin from the next minor release, in favor of the JSX plugin with the {development: NODE_ENV==="development" } option? We can also make that as the defaults of the JSX plugin and preset-react in Babel 8.

As for now I will add a document for the DEV plugin. Once the development option of the JSX plugin is ready, we will put a note for people to migrate to that option instead of having two JSX plugins in the package.json.

[dante01yoon]

• react/jsx-dev-runtime

@gaearon does react/jsx-dev-runtime use @babel/plugin-transform-react-jsx-development default?