Skip to content

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

Closed
@yim222

Description

@yim222

Following to this discussion:

facebook/react#20843 (comment)

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)

Activity

Kordonme

Kordonme commented on Mar 16, 2021

@Kordonme

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @Kordonme@yim222

      Issue actions

        Hot reloading STOP working on REACT v17 after adding “export const” out of App functional component · Issue #10606 · facebook/create-react-app