Skip to content

@jsxImportSource does not imply a module, breaking emitΒ #46723

Closed
@kitsonk

Description

@kitsonk

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.

Metadata

Metadata

Assignees

Labels

Fix AvailableA PR has been opened for this issueNeeds InvestigationThis issue needs a team member to investigate its status.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions