[TypeScript] Refresh not working with arrow functions

Hey There,

I’m running into issues getting hot reloading working in my webpack-typescript app:

I’m only getting this error when I use arrow functions to declare my React components:

// hot-reload doesn't work
const App = () => {
  return ....
}
export default App

// hot-reload works
function App () {
  return ...
}
export default App;

This approach works when I use the sample project though.

https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/217

 plugins: [
    new ReactRefreshPlugin(),
    new ForkTsCheckerWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: './public/index.html',
    }),
  ]

Dependencies:

"fork-ts-checker-webpack-plugin": "^6.0.6",
"html-webpack-inline-source-plugin": "^0.0.10",
"html-webpack-plugin": "^4.4.1",
"react-refresh": "^0.9.0",
"react-refresh-typescript": "^1.1.0",
"style-loader": "^0.23.1",
"ts-loader": "^8.0.4",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",

Any ideas on what is causing this issue?

[Jack-Works]

I tried to reproduce this and found it’s likely not a bug in react-refresh-typescript.

If used as entry component means the following code:

import { render } from 'react-dom'
import { Component } from './Component'

export function App() {
    return (
        <div>
            <Component />
        </div>
    )
}
render(<App />, document.getElementById('root')!)

Yes, in this case, it won’t refresh but reload the whole tree. Because every time this file getting HMRed, this whole file will be re-executed. And if you re-call ReactDOM.render (the last line) on your root component, it will be unmounted and remounted, because the previous App has a different identity than the current App, and the reconciliation algorithms will not diff the vDOM tree for a different component tree.

If it is your case, please move App to another file, that will fix the problem. If not, please point out and give a reproduce. Thanks

[Ogg70]

Hi, I have exactly the same problem, but I have come to the conclusion that the arrow functions do not have to do with it. As far as I understand, it’s all about the use of hooks.

// hot-reload works
// displayName in React Developer Tools - App
const App = () => {
  return <div><button>add</button></div>;
};

export default App;

// hot-reload doesn't work(triggered full reload)
// displayName in React Developer Tools - Anonymous
const App = () => {
  const [count, setCount] = React.useState(1)
  return <div><button onClick={() => setCount(count + 1)}>add</button></div>;
};

export default App;

I also noticed that in React Developer Tools, the arrow function components are named <Anonymous>. Most likely the problem is in react-refresh-typescript, for some reason the component loses displayName.