Closed
Description
Following to this discussion:
facebook/react#20843 (comment)
the question at SO :
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
- Create new react-app with 17 version.
- Run it with npm start.
- Validate that hot-reloading is working
- Add at App.jsx file above the App function the line: `export const x = "something";
- 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)
Activity
Kordonme commentedon Mar 16, 2021
A more specific example of this being an issue, is when you are exporting
App
as a const. I prefer to do just that, and I just spent a few good hours trying to find out why auto refresh did not work.