Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
kitsonk opened this issue Nov 8, 2021 · 2 comments Β· Fixed by #47495
Closed

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

kitsonk opened this issue Nov 8, 2021 · 2 comments Β· Fixed by #47495
Assignees
Labels
Fix Available A PR has been opened for this issue Needs Investigation This issue needs a team member to investigate its status.

Comments

@kitsonk
Copy link
Contributor

kitsonk commented Nov 8, 2021

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.

@andrewbranch
Copy link
Member

cc @weswigham, I know there were a lot of discussions about implicit moduleness of new React code, don’t remember where we landed.

@andrewbranch andrewbranch added the Needs Investigation This issue needs a team member to investigate its status. label Nov 8, 2021
@weswigham
Copy link
Member

Yeah, we'd like to change it so we can always parse things as modules under certain compiler settings, but to do so would likely require a breaking change to put parser API, which is why we put off doing it. Once we're okay taking a breaking change to our parser API, though (or introduce a new parser API?), I imagine we can make the change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fix Available A PR has been opened for this issue Needs Investigation This issue needs a team member to investigate its status.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants