TypeScript imports createElement factory function when using jsx=react-jsx

[dawidgarus]

🔎 Search Terms

jsx, createElement, react-jsx

🕗 Version & Regression Information

Latest version of TypeScript

⏯ Playground Link

https://www.typescriptlang.org/play/?jsx=4&ts=5.4.5#code/GYVwdgxgLglg9mABAFQKYGcoGlUE8AUADgIYBOxAtugFyIDeiA1nrZqTGAOaIC+AlLWJhc9HgCgxEBJkQlyVHCIC89Ji0QByOZQ28A3BKlh0cADaoAdKbid8AHjSZFa3EoBEwOHDf0Lf7Qp4PIgA9AB8fAZGJuZWNvaO2Hi+-mSU6IrBzK4eXj7hkUA

💻 Code

function TestKey(params: { key: string }): any {}

const paramsKey = { key: 'param' };

console.log(<TestKey key="foo" {...paramsKey} />);
console.log(<TestKey {...paramsKey} key="foo" />);

🙁 Actual behavior

Compiled into:

import { createElement as _createElement } from "react";
import { jsx as _jsx } from "react/jsx-runtime";
function TestKey(params) { }
const paramsKey = { key: 'param' };
console.log(_jsx(TestKey, Object.assign({}, paramsKey), "foo"));
console.log(_createElement(TestKey, Object.assign({}, paramsKey, { key: "foo" }))); // what?

🙂 Expected behavior

Compiled into:

import { jsx as _jsx } from "react/jsx-runtime";
function TestKey(params) { }
const paramsKey = { key: 'param' };
console.log(_jsx(TestKey, Object.assign({}, paramsKey), "foo"));
console.log(_jsx(TestKey, Object.assign({}, paramsKey), "foo"));

Additional information about the issue

No response

[nmain]

Babel does the exact same thing. This is expected and explained in detail in https://github.com/facebook/react/issues/20031#issuecomment-710346866. The reasoning is all very React specific, so if you're using react-jsx with something that's not React, you might want to avoid key-after-spread.

[typescript-bot]

This issue has been marked as "Working as Intended" and has seen no recent activity. It has been automatically closed for house-keeping purposes.