SWC hot reload doesn't work when arrow function is used

Whenever I use arrow function instead of function, hot reload doesn’t work. See screenshot and how to repro below:

Repro:

1. clone react-refresh-webpack-plugin
2. navigate to examples/typescript-with-swc
3. Change

function App() {
  return (
    <div>
      <ClassDefault />
      <ClassNamed />
      <FunctionDefault />
      <FunctionNamed />
      <Suspense fallback={<h1>Loading</h1>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

to

const App= () => {
  return (
    <div>
      {/* added */}
     <div> test </div> 
      <ClassDefault />
      <ClassNamed />
      <FunctionDefault />
      <FunctionNamed />
      <Suspense fallback={<h1>Loading</h1>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

1. Change test text to different text

[Austaras]

Cool, great to get my questions answered. I’ll send fix when I have time.

[Austaras]

Yeah it’s me. I have spent some time for this issue and there’re multiple layers of problems in this issue:

1. Arrow function get transpiled to (function () {}).bind(this), which is a long standing minor defect in swc and there haven’t been a good reason to fix it(until this issue)
2. And somehow this will cause react refresh to stop working, I have no idea why though
3. I forget to enable preset-env for swc, so this issue should be reopened @pmmmwh
4. However when I add it and add browserslist field to package.json, webpack hot reload will silently fail, I have tested with other examples and they behave the same. I have absolutely idea why this is happening