JSX automatic transform imports 'react' with createElement

[rdzar]

The problem
ESBuild suddenly includes the following code:

import { createElement } from "react";

while using --jsx=automatic, assuming JSX output.

The reason
It seems using a custom spread with a key, causes it to break and use old 'createElement' logic.

<div {...customProps} key={field.field}>

If you replace this with

<div key={field.field}>

it will work, but, well, I kinda need the spread ;) The demo is simplified.

Playground
https://esbuild.github.io/try/#YgAwLjIwLjEAdGVzdC5qc3ggLS1qc3g9YXV0b21hdGljAAB0ZXN0LmpzeABleHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBUZXN0Q29tcG9uZW50IChwcm9wcykgewogIGZ1bmN0aW9uIGVhY2hGaWVsZCAoZmllbGQpIHsKICAgIGNvbnN0IGN1c3RvbVByb3BzID0gewogICAgICAnZmllbGQtZGF0YSc6IGZpZWxkLmZpZWxkCiAgICB9OwogICAgcmV0dXJuICgKICAgICAgPGRpdiB7Li4uY3VzdG9tUHJvcHN9IGtleT17ZmllbGQuZmllbGR9PgogICAgICAgIDxsYWJlbD57ZmllbGQuZmllbGR9PC9sYWJlbD4KICAgICAgPC9kaXY+CiAgICApOwogIH0KCiAgcmV0dXJuICgKICAgIDxkaXY+CiAgICAgIHtwcm9wcy5maWVsZHMubWFwKGVhY2hGaWVsZCl9CiAgICA8L2Rpdj4KICApCn0

What I expected
I expected the build to return all jsx/jsxs elements.

I think this is a bug, but I'm not totally sure. As the docs say:

esbuild's JSX transform to automatic, which generates import statements for you

But am I wrong, assuming JSX build, should produce JSX/JSXS calls?

[evanw]

This is not a bug. You have chosen to use the new React-specific JSX transform instead of the original general-purpose JSX transform, and it has a bunch of React-specific stuff in it including this weird edge case that you discovered. TypeScript and Babel also do the exact same thing as esbuild here, so esbuild is correct.

React's blog post about their new transform contains a note about this edge case:

If you’re a library author and you are implementing the /jsx-runtime entry point for your library, keep in mind that there is a case in which even the new transform has to fall back to createElement for backwards compatibility. In that case, it will auto-import createElement directly from the root entry point specified by importSource.

This edge case is also mentioned in esbuild's documentation about the JSX automatic transform:

The createElement import is used regardless of the JSX dev mode when an element has a prop spread followed by a key prop, which looks like this:

return <div {...props} key={key} />

I'm closing this issue because this behavior is intentional, and is already called out in esbuild's documentation. I agree that it's weird and unfortunate but the React team designed their JSX transform so they get to decide how it works.