create-react-app: 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

Create a new app using npx create-react-app <appName> or yarn create react-app <appName>
Enter the app directory cd <appName> and open the app in code editor (code . for VSCode)
Start dev server using npm start or yarn start
Edit App.js and save. Confirm that changes are reflected on the browser
Edit `index.js and save. Confirm that changes are NOT reflected on the browser
Edit App.js again and save. Confirm that changes are NOT reflected on the browser
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:

Extract the zip anywhere
Open terminal inside the app folder and run yarn to install dependencies
Follow “Steps to reproduce” section to reproduce the issue

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 37
Comments: 55 (1 by maintainers)

Links to this issue

javascript - Hot Reload is not working in my React App - Stack Overflow

Commits related to this issue

spent all day debugging a hot-refresh bug in react-scripts, this is the workaround. details here https://github.com/facebook/create-react-app/issues/9984 — committed to ssmithcp/liftmetrics by ssmithcp 3 years ago
Disable react fast-refresh This change restores the full hot module reload from webpack. When the following issue will be resolved I'll consider giving fast-refresh another go: https://github.com/fa... — committed to oren-l/JSON-Path-Visualizer by oren-l 3 years ago

Most upvoted comments

Bit of an overkill, but this patched the issue:

In package.json, use “react-scripts”: “3.4.4”
Delete package-lock.json
Run “rm -rf node_modules && npm install”
npm start

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

Thanks @garamb1 for the suggestion.

+65

mowasfi7 on Nov 21, 2020

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.

WindowsTerminal_X5rj9vDi9s

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"
  },

O3gMutVNyz

+20

GunnerJnr on Feb 11, 2021

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.

+18

iamchubko on Jan 27, 2021

Although adding “FAST_REFRESH=false” in the “.env” file solved my problem but the question here is that when this issue will be resolved by React officially. Not every beginner can waste 1-2 hours just for this small issue. Waiting for this issue to be fixed ASAP.

+14

verma1019 on Mar 8, 2021

Again, disabling fast refresh or downgrading react-scripts are not solutions, you either disable a feature of react-scripts 4.x.x or downgrade.

A solution requires a fix in react-scripts. A workaround is to prevent the fast-refresh boundry to reach your index file, this can be achieved like I commented a while ago:

Same issue here, but I’ve worked around the issue by simply moving everything out of the index file, and leaving just this:
import 'react-app-polyfill/ie11'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))
That solved our problems.

This workaround is simple and gives you the best of both worlds: Fast refresh works as expected (which btw is an AMAZING feature) and falls back to a full reload when needed.

+13

sondresj on Feb 5, 2021

As a subscriber to this issue I would be very grateful for not being repeatedly notified when the mowasfi7-suggestions works.

It’s just a downgrade.

Every time I see the blue dot I get my hopes up that there’s a real fix or at least some kind of new information. 🙏

+13

kraf on Jan 13, 2021

Same issue here, but I’ve worked around the issue by simply moving everything out of the index file, and leaving just this:

import 'react-app-polyfill/ie11'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

That solved our problems.

+12

sondresj on Dec 18, 2020

Create .env file in the root and type in FAST_REFRESH= false CHOKIDAR_USEPOLLING= true

co-bby on Oct 12, 2021

With my OS Windows 10, it works very well. Thank you @mowasfi7 Finally I have switched to Ubuntu. There seems no problem with react-scripts:4.0.1

celalettin-turgut on Jan 18, 2021

it works for me now. I just added the .env file with FAST_REFRESH=false

liptonzuma on Mar 1, 2021

change "start": "react-scripts start", for "start": "CHOKIDAR_USEPOLLING=true react-scripts start" in the package.json

pierorolando1 on Aug 1, 2021

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à!

oren-l on Feb 10, 2021

algtm on Jan 24, 2021

So the issue is because of react-script version 4 and above. Try this -> 1-npm uninstall react-scripts 2-npm i react-scripts@3.4…4 The reason i am installing react-script 3.4.4 is because somewhere i read an article that version 4+ does not do reload. Try it worked for me

vigilanteX on Jun 8, 2021

FAST_REFRESH=false

This solution worked for me thanks

baabiran on Mar 31, 2021

Its happening same for me. OS = ubuntu 18.04.05 node version =12.20.0 npm version = 6.14.8 create-react-app version - 4.0.1

vin070 on Nov 26, 2020

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.

dwelle on Nov 8, 2020

change "start": "react-scripts start", for "start": "CHOKIDAR_USEPOLLING=true react-scripts start" in the package.json

thanks this worked for me!

anhay1999 on Jul 24, 2022

Create .env file in the root and type in FAST_REFRESH= false CHOKIDAR_USEPOLLING= true

this works for me. thanks a lot @co-bby

rzk-linesofcode on Oct 14, 2021

npm i react-scripts@3.4…4

but so many packages are depricated in 3.4.4

abhishek-chhipa on Jul 28, 2021

Setting FAST_REFRESH=false in .env doesn’t really solve this issue. It just disables (obviously) fast refresh for all files, even the ones that was working.

For me, the bug seems to only occur on index.js and App.js directly under ./src. For other files, Fast refresh seems to work fine.

adamlindqvist on May 24, 2021

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.

This worked for me as well, thanks 😃

anmolagarwal17 on Mar 4, 2021

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!

GersonDias on Nov 10, 2020

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 😕

oren-l on Nov 5, 2020