Create-react-app: Auto reload does not detect changes to index.js

[uzair-suria]

Bug Description

The app does not auto reload upon saving changes in index.js, but reloads on changes in App.js. If there are any changes in index.js, then the monitoring of App.js is suspended till the app is reloaded in the browser.

Did you try recovering your dependencies?

I have used fresh apps using npx create-react-app and yarn create react-app separately. The issue is there on both apps.

$ npm --version
6.9.0
$ yarn --version
1.22.5

Environment

$ npx create-react-app --info
npx: installed 92 in 7.692s

Environment Info:

  current version of create-react-app: 4.0.0
  running from C:\Users\uzair\AppData\Roaming\npm-cache\_npx\1972\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.19041
    CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 86.0.4240.111
    Edge: Spartan (44.19041.423.0), Chromium (86.0.622.58)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    react-scripts: 4.0.0 => 4.0.0
  npmGlobalPackages:
    create-react-app: Not Found

$ yarn create react-app --info
yarn create v1.22.5
warning ..\package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-react-app

Environment Info:

  current version of create-react-app: 4.0.0
  running from C:\Users\uzair\AppData\Local\Yarn\Data\global\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.19041
    CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
  Binaries:
    Node: 10.16.0 - ~\AppData\Local\Temp\yarn--1604315188332-0.32183200779039645\node.CMD
    Yarn: 1.22.5 - ~\AppData\Local\Temp\yarn--1604315188332-0.32183200779039645\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 86.0.4240.111
    Edge: Spartan (44.19041.423.0), Chromium (86.0.622.58)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    react-scripts: 4.0.0 => 4.0.0
  npmGlobalPackages:
    create-react-app: Not Found

Done in 14.05s.

Steps to reproduce

1. Create a new app using npx create-react-app <appName> or yarn create react-app <appName>
2. Enter the app directory cd <appName> and open the app in code editor (code . for VSCode)
3. Start dev server using npm start or yarn start
4. Edit App.js and save. Confirm that changes are reflected on the browser
5. Edit `index.js and save. Confirm that changes are NOT reflected on the browser
6. Edit App.js again and save. Confirm that changes are NOT reflected on the browser
7. Reload the app on browser Ctrl+R. Confirm that all changes are now reflected on the browser.

Expected behavior

I have been learning React for the past few weeks and usually each tutorial started by following commands

npx create-react-app ./<appName> && cd <appName> && rm src/* && touch src/index.js

... and all the components were usually created inside index.js. Up until few days ago, all the saved changes in index.js were detected automatically and the app used to refresh to reflect those changes

Actual behavior

The auto refresh works fine as long as I keep editing App.js, but breaks down as soon as index.js is edited. Once index.js has been changed, until the app page is manually refreshed, changes in App.js won't trigger auto refresh.

Reproducible demo

This is the app I created using yarn create react-app: yarn-app.zip
The node_modules and yarn.lock have been removed from the zip to reduce file size.

Steps to run the demo:

1. Extract the zip anywhere
2. Open terminal inside the app folder and run yarn to install dependencies
3. Follow "Steps to reproduce" section to reproduce the issue

[sifat009]

Yes i've just followed the steps from Steps to reproduce and found that issue too in my end.

[oren-l]

It happened to me as well, I think this is related to the react-refresh / fast-refresh that was introduced in react-script v4.
Unfortunately, I can't find anything about this change in create-react-app docs so not sure if we should expect such change in behavior or if there is some custom code we need to add to handle changes outside of react components :/

[dwelle]

Yes — hard to say if it's CRA, pmmmwh/react-refresh-webpack-plugin, React's fast-refresh, or something else altogether :/.

For me (different codebase), changes are detected, but the given module/component isn't reloaded/hot-reloaded.

[firasharb]

I just had this happen to me recently. One of the tutorials that I'm following insists on creating all the Components inside index.js. Now this is not a app-breaking bug but it does cause annoyance to the user when they are coding for a long time and some of that time is wasted manually reloading the browser.

[wrxpowered]

So am I. Also, when I change export result in App.js directly, changes are NOT reflected too.

function App () { ... }
function Test () { ... }
export default Test;

class App extends React.Component () { ... }
export default App;

[zhizhunbao995]

It happened to me as well

[jzecca]

The worst (but quite logical) thing about this is that everything that's imported in index is ignored too.

Since I'm wrapping my app in an I18nextProvider there, I need to manually refresh each time I change a translation.
Same goes for my Material UI theme, and I can only guess that Redux users suffer from this too.

[GersonDias]

I'm having troubles when changing scss files as well, the app is not updated with changes. Since I update for 4.0. The hot reloading also not working always that I change my components (some time works other not)... very frustrating!

[Earle-Poole]

An issue similar to this is affecting me as well.

Changes being made to index.tsx are not triggering a hot reload ( I tested this by adding an extra div element with random text after my component, saving, and checking the DOM for this element. )

I also have a toolbox.ts file that holds my common functions, and it behaves the same way as index.tsx, in that it does not trigger a hot reload.

Taking my observations one step further, I found that making changes to either of these two files, and saving, completely breaks the hot reload functionality for my other previously-hot reloading components, until I reload the page. Perhaps this tidbit will point a contributor in the right direction.

To be clear this is the behavior I am seeing

Navigation.tsx saved
-> _hot reload triggered_
-> index.ts saved
-> _nothing happens_
-> Navigation.tsx saved
-> _nothing happens_
-> reload the page (F5)
-> Navigation.tsx saved
-> _hot reload triggered_ ...

If I do not have to touch these two files during my development then the 4.0 hot reload functions as expected.

[LucasFavini]

I've the same problem here! Waiting for update :P

[mowasfi7]

Bit of an overkill, but this patched the issue:

1) In package.json, use "react-scripts": "3.4.4"

2) Delete package-lock.json

3) Run "rm -rf node_modules && npm install"

4) npm start

Looking forward to having this fixed in "react-scripts": "4.0.0"

Thanks @garamb1 for the suggestion.

[quikki13]

It happened to me too