Hot reloading STOP working on REACT v17 after adding “export const” out of App functional component

Created by: yim222

Following to this discussion:

https://github.com/facebook/react/issues/20843#issuecomment-781703140

the question at SO :

https://stackoverflow.com/questions/66260614/hot-reloading-stop-working-on-react-v17-after-adding-export-const-out-of-app-f

I suddenly encounter this issue, until I found the cause. I have putted an export const out of the scope of App functional component. After doing that – hot reloading stops to work. I saw this behavior also on another project. But with older project it didn’t happen. (when app is regular class component there).

---

React version: 17.1

Steps To Reproduce

1. Create new react-app with 17 version.
2. Run it with npm start.
3. Validate that hot-reloading is working
4. Add at App.jsx file above the App function the line: `export const x = "something";
5. Now check the hot-reloading - it doesn't work. `

Link to code example: You can see a demo of this in this Basic create-app project (compare it to the branch: hot-reload-now-not-working). Also you have this video.

import logo from './logo.svg';
import './App.css';
//adding export const
export const x = "kk";
//Now hot-reloading is not working
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit 2 <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

The current behavior

Hot-reloading stops working.

The expected behavior

Hot-reloading should continue to work. (Or if it's problematic thing - to notify the developer about that at logs)