Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

Auto reload does not detect changes to index.js

Created by: 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 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 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