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

JSX automatic transform development incorrect #2656

Closed
kitsonk opened this issue Nov 5, 2021 · 1 comment · Fixed by #2741
Closed

JSX automatic transform development incorrect #2656

kitsonk opened this issue Nov 5, 2021 · 1 comment · Fixed by #2741
Labels
Milestone

Comments

@kitsonk
Copy link
Contributor

kitsonk commented Nov 5, 2021

Describe the bug

When attempting to transform JSX, with the setting development to true, swc does not properly transpile like Babel or TypeScript.

It provides something like this:

import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
function App() {
    return(/*#__PURE__*/ _jsx("div", {
        __source: {
            fileName: "https://deno.land/x/mod.tsx",
            lineNumber: 4
        },
        __self: this,
        children: /*#__PURE__*/ _jsx(_Fragment, {
        })
    }));
}

Input code

function App() {
  return (
    <div><></></div>
  );
}

Using a JSX pass with the options like this:

let options = swc_ecma_transforms_react::react::Options {
  runtime: Some(swc_ecma_transforms_react::react::Runtime::Automatic),
  development: true,
  import_source: "react".to_string(),
  ..Default::default()
};

Expected behavior

This is what Babel outputs with development plugin:

var _jsxFileName = "/repl.tsx";
import { Fragment as _Fragment } from "react/jsx-dev-runtime";
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
export function App() {
  return /*#__PURE__*/_jsxDEV("div", {
    children: /*#__PURE__*/_jsxDEV(_Fragment, {}, void 0, false)
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 3,
    columnNumber: 5
  }, this);
}

And this is what is output by the TypeScript emitter:

import { Fragment as _Fragment, jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
const _jsxFileName = "file:///input.tsx";
export function App() {
    return (_jsxDEV("div", { children: _jsxDEV(_Fragment, {}, void 0, false, { fileName: _jsxFileName, lineNumber: 3, columnNumber: 10 }, this) }, void 0, false, { fileName: _jsxFileName, lineNumber: 2, columnNumber: 11 }, this));
}

As you can see in both cases, they are using the jsxDEV import from the jsx-dev-runtime module, not the jsx import from the jsx-runtime module.

Version

swc_ecma_transforms_react 0.53.0

@swc-bot
Copy link
Collaborator

swc-bot commented Oct 20, 2022

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@swc-project swc-project locked as resolved and limited conversation to collaborators Oct 20, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Development

Successfully merging a pull request may close this issue.

3 participants