Auto reload does not detect changes to index.js

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 fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-react-app@4.0.0" 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 <kbd>Ctrl</kbd>+<kbd>R</kbd>. 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

[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.

[GunnerJnr]

This solution from Stackoverflow solved this problem for me. You can read about what it does in advanced-configuration.md (url). After that rerun npm start. Works with react-scripts: 4.0.1.

From this comment it wasn’t clear for me that this solution was what I was looking for: It appears that there is an environment variable called FAST_REFRESH that is true by default and when set to false restores webpack hot module reload to work as it used to.

just add it to your .env file and voilà!

I second this, create .env file in root project dir, add FAST_REFRESH=false, save and re-run npm start you should now have the desired auto-refresh.

I am running Windows 10 (x64) and using the VS Code as my environment.

Node Version: v14.15.5 NPM Version: 7.5.3 Create React App Version: 4.0.2

package.json

  "name": "react-hello",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.7.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.2",
    "web-vitals": "^1.1.0"
  },