New JSX transform doesn't work when using react v17+

🐛 bug report

react v17+ removes the need for import React from "react"; statements but looks like the zero-config of Parcel doesn’t work with it.

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc: none

// package.json
...
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
...

CLI command: "parcel serve ./app/index.html --port 3000"

🤔 Expected Behavior

Below code should work fine when using react v17+

import { render } from "react-dom";

render(
    <h1>Hello World</h1>,
  document.getElementById("root")
);

😯 Current Behavior

Nothing is rendered on the screen. Browser console error says “React is not defined”

💁 Possible Solution

This config works: https://stackoverflow.com/a/67759434/7435656

🔦 Context

Migrating existing codebase from create-react-app to parcel. Followed the Generic Webapp guide from the docs but it doesn’t look like those steps work for projects using the new JSX transform.

💻 Code Sample

Adding import React from "react"; makes the application work but that shouldn’t be required when using react v17+

🌍 Your Environment

Software	Version(s)
Parcel	^2.0.0-beta.3.1
Node	v14.17.0
npm/Yarn	6.14.13
Operating System	Ubuntu 20 LTS

[devongovett]

Ah I see. We could detect the react version and do this automatically I guess.

[mischnic]

jsx is not a function

Does that environment support the new automatic jsx runtime? https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Disabling that in a jsconfig or tsconfig config might work (so that the traditional React.createElement is used)