Infinite loop code generated with JSX + ES5 onChange attribute via anonymous function

[vvo]

Describe the bug

Hi there,

I discovered this bug while working on my big Next.js 12 application using SWC and then reduced it to a very simple example on a fresh new create-next-app with Next.js 12. And I was able to reproduce it on the SWC playground too.

PS: The playground share functionality is not working at the moment.

Input code

function App() {
  return <Form />
}

function Form({ onChange = function () {} }) {
  return (
    <input
      onChange={function () {
        onChange();
      }}
    />
  );
}

Output code

function App() {
    return React.createElement(Form, null);
}
function Form(param) {
    var _onChange = param.onChange, onChange = _onChange === void 0 ? function() {
    } : _onChange;
    return React.createElement("input", {
        onChange: function onChange() {
            onChange();
        }
    });
}

Config

{
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "jsx": true
    },
    "target": "es5",
    "loose": false,
    "minify": {
      "compress": false,
      "mangle": false
    }
  },
  "module": {
    "type": "es6"
  },
  "minify": false,
  "isModule": true
}

Playground link

SWC playground share functionality not working at the moment

Expected behavior

The generated code should not trigger an infinite loop

Version

1.2.11

Additional context

Do we need to rename anonymous functions when compiling to ES5?

Here's a live Next.js demo:

• https://swc-maximum-call-stack-error.vercel.app/
• https://github.com/vvo/swc-maximum-call-stack-error

[swc-bot]

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.