Vite generated incorrect JavaScript from TSX

[fpsqdb]

Related plugins

• plugin-react

• plugin-react-swc

• plugin-react-oxc

• plugin-rsc

Describe the bug

type A = {
  register: (callback: unknown) => void;
};
const a = {
  register: (callback: unknown) => {
    console.log(callback);
  },
};

export function Test() {
  const funA = async <T,>(arg1: T) => {
    console.log(arg1)
  }
  (a as A).register(funA);
  return (
    <div>
      <h1>Test</h1>
    </div>
  );
}

generated code:

const a = {
  register: (callback) => {
    console.log(callback);
  }
};
export function Test() {
  const funA = (async (arg1) => {
    console.log(arg1);
  })(
    a
  ).register(funA);
  return /* @__PURE__ */ jsxDEV("div", { children: /* @__PURE__ */ jsxDEV("h1", { children: "Test" }, void 0, false, {
    fileName: "/project/workspace/src/Test.tsx",
    lineNumber: 36,
    columnNumber: 7
  }, this) }, void 0, false, {
    fileName: "/project/workspace/src/Test.tsx",
    lineNumber: 35,
    columnNumber: 5
  }, this);
}

Error: Uncaught ReferenceError: Cannot access 'funA' before initialization
at Test (Test.tsx:14:21)

Corrected code should be

const a = {
  register: (callback) => {
    console.log(callback);
  }
};
export function Test() {
  const funA = (async (arg1) => {
    console.log(arg1);
  });
  a.register(funA);
  return /* @__PURE__ */ jsxDEV("div", { children: /* @__PURE__ */ jsxDEV("h1", { children: "Test" }, void 0, false, {
    fileName: "/project/workspace/src/Test.tsx",
    lineNumber: 36,
    columnNumber: 7
  }, this) }, void 0, false, {
    fileName: "/project/workspace/src/Test.tsx",
    lineNumber: 35,
    columnNumber: 5
  }, this);
}

If you add a semicolon at the end of the funA declaration, everything works fine.

  const funA = async <T,>(arg1: T) => {
    console.log(arg1)
  };
  (a as A).register(funA);

Reproduction

https://codesandbox.io/p/devbox/9hq6fr

Steps to reproduce

No response

System Info

codsandbox

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

This appears to be a babel bug https://babeljs.io/repl#?code_lz=MYewdgzgLgBAZgVzAQRgXhgQwgTzMGAHgBUAaAPgApMAnAcwEYAuGYgSnXJgG8AoGGKEggANgFMAdCJB1q9Bm14BfXtSwQYyNhJpi6AS2hialRCjYBuIA&shippedProposals=true&evaluate=true&sourceType=module&lineWrap=true&presets=react%2Ctypescript&prettier=true&version=7.28.2&externalPlugins=%40babel%2Fplugin-transform-react-jsx-development%407.27.1

const funA = async <T,>(arg1: T) => {
  console.log(arg1)
}
(a as A).register(funA);