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

[yim222]

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)

[gaearon]

Fast Refresh (that's how React implementation of "hot reloading" is called) is described here. We'll need to port this content to the main React website.

Adding an export that's not a React component makes it unsafe to reload just that file — because other files may be using that export. However, in your case, the file importing it is src/index.js, which we also can't reload (because it doesn't export components). So we end up reloading the whole page as a fallback.

So this is working as intended. Re: adding a log, we can't add a log because you wouldn't have time to read it before the page refreshes anyway. It's conceivable that we could add a log on the next launch via localStorage. That's something you could raise as a feature request to the concrete integration — in your case, it would be in the Create React App repository.

[yim222]

Thanks Dan, copy that @gaearon

[yim222]

@gaearon

Adding an export that's not a React component makes it unsafe to reload just that file — because other files may be using that export. However, in your case, the file importing it is src/index.js, which we also can't reload (because it doesn't export components). So we end up reloading the whole page as a fallback.

So you mean that if it's file that nested on the app tree, even though it have non-react export the hot-reloading will track its import and won't fallback. Yeah ?

[gaearon]

Yes, as long as all files importing that file are themselves only exporting React components. Or, if one of them doesn't, all files importing that file [...] you get the idea.

[gaearon]

You can mentally think of this as a file edit being a "signal" traversing up the module tree. A file whose exports are all React components "catches" the signal and prevents it from spreading further. If it spreads to the entry point (src/index.js), we do a hard reload.

[yim222]

@gaearon Copy that but still, in my case :

So we end up reloading the whole page as a fallback.

But the page isn't reload at all. Not a hard loading either

[gaearon]

That sounds like a bug. File it in Create React App please? thanks!

[yim222]

@gaearon You mean to open it on that project?
https://github.com/facebook/create-react-app

Just to be sure

[rickhanlonii]

@yim222 yes.

[yim222]

Done
@gaearon @rickhanlonii

facebook/create-react-app#10606