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

[cseas]

🐛 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]

Do you know if this is safe to turn on by default? Will it break existing projects using the legacy JSX transform?

[cseas]

The docs of the babel plugins [1] [2] say that the "automatic" runtime does automatically import the functions that the JSX transpiles to. And "automatic" is going to be the default option starting Babel 8 so it might be safe to turn on as a default.

But the babel setup instructions on the announcement page mention something about implementing jsx-runtime for library authors which I'm not sure what that means exactly:
https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#manual-babel-setup

It looks like both create-react-app and next.js are using a hasJsxRuntime boolean to determine which transform to use.

As an easier quick-fix alternative, maybe a note in the parcel v2 docs could be added, mentioning "For new jsx transform in react 17+, add this extra config". Like how Snowpack does for Fast Refresh.

Edit: This issue mentions that Babel does not detect the react version so I'm assuming having "automatic" as default runtime might break compatibility with older react versions.

[devongovett]

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

[MrEmanuel]

I'm having the same issue.
I've looked in the related issue #6501 but I can't seem to make sense of it.
Is the solution to install the babel plugin and add a .babelrc as suggested in the stackoverflow-question?
Or what do I need to do to fix it? Thanks! :)

[devongovett]

Are you using the latest nightly release of Parcel? If so it should be automatic.

[contactjavas]

Hi @devongovett :)

This is also not working when using React and/or ReactDOM as global. I use "parcel": "^2.0.0-rc.0"

WordPress/Gutenberg (the new WP editor) loads react.js and react-dom.js in the Customizer, so that plugin developers have global React and ReactDOM ready to use.

This is how I aliased them (which shouldn't be a problem):

"alias": {
  "jquery": {
    "global": "jQuery"
  },
  "react": {
    "global": "React"
  },
  "react-dom": {
    "global": "ReactDOM"
  }
}

The error I got when using un-optimized build is: Uncaught TypeError: $5c359dd09f5628e6$exports.jsx is not a function.
This is how I set the development build: parcel build src/control.js --no-optimize --dist-dir dist . The result is easy to read.

I may create a separate issue for this. But yea, JSX transform doesn't work when using global aliases.

[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)