Closed
Description
Bug Report
π Search Terms
jsxImportSource
π Version & Regression Information
- This has existed in every version I have tried since the pragma was introduced.
β― Playground Link
Playground link with relevant code - broken
Playground link with relevant code - working
π» Code
The following code...
/** @jsxImportSource react */
function App() {
return (
<div>
<h1>Hello, world!</h1>
</div>
);
}
<App />;
console.log("Hey!");
Will emit:
"use strict";
/** @jsxImportSource react */
function App() {
return (_jsx("div", { children: _jsx("h1", { children: "Hello, world!" }, void 0) }, void 0));
}
_jsx(App, {}, void 0);
console.log("Hey!");
Which is broken, because there is no _jsx
symbol being imported.
But the following code:
/** @jsxImportSource react */
function App() {
return (
<div>
<h1>Hello, world!</h1>
</div>
);
}
<App />;
console.log("Hey!");
export {};
Will change the emit to:
import { jsx as _jsx } from "react/jsx-runtime";
/** @jsxImportSource react */
function App() {
return (_jsx("div", { children: _jsx("h1", { children: "Hello, world!" }, void 0) }, void 0));
}
_jsx(App, {}, void 0);
console.log("Hey!");
Where the _jsx
symbol is being imported.
π Actual behavior
When there are no imports/exports, but a @jsxImportSource
pragma, the JSX is transformed expecting the _jsx
symbol to be imported, but the import never occurs.
π Expected behavior
The a @jsxImportSource
pragma implies that the file is a module and not a script and ensure that the emitted symbols are actually imported.