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

[RajeevPullat]

Please fix this issue ASAP. Its very annoying and killing development experience.

[vin070]

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

[artpumpkin]

Same here, please fix this issue.

[jovana]

Also another annoying issue: If you have a few warnings over different files after you fix one fix the warnings are clear. So you have to stop and start the dev server to see the warnings again.

1. It does not reload the web browser after saving files.
2. It clears the output of the warnings after saving and lost tracking of the warnings.

For now, I remove version 4 and use 3.4.4 again. I hope it will be solved :-)

[KartikJaspal]

Happens similarly in my index.js file . every time i change something in return statement the browser does not auto reflect the changes only a site refresh is updating the changes. Guess we have to code in app.js for now.

[sondresj]

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.

[envs]

Thanks @mowasfi7. As at version 4.0.1 (react-scripts), the behavior still remains the same; but the suggested quick fix solved it.

[hfiggs]

Also experiencing this issue on 4.0.1. Just commenting to thank @mowasfi7 as his suggestion worked for me as well.

[harounchebbi]

@mowasfi7 Worked for me as well. Thank youu :)

[ebertcrn]

I'm using Win10 OS and react 16.9.0 and @mowasfi7 's suggestion worked pretty well.
Thank you, dude!

[kraf]

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

[celalettin-turgut]

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

[algtm]

+1

[iamchubko]

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.

[mero2online]

Thanks @mowasfi7 Worked for me.
Appreciate.

[liptonzuma]

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

[anmolagarwal17]

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 😃

[verma1019]

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.

[baabiran]

FAST_REFRESH=false

This solution worked for me thanks

[cdtkrk]

Why is default value of FAST_REFRESH true?
The comment said that it is disabled by default.

create-react-app/packages/react-scripts/config/env.js

Lines 98 to 100 in 7e4949a

	// which is why it's disabled by default.
	// It is defined here so it is available in the webpackHotDevClient.
	FAST_REFRESH: process.env.FAST_REFRESH !== 'false',

[adamlindqvist]

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.

[vigilanteX]

So the issue is because of react-script version 4 and above.
Try this ->
1-npm uninstall react-scripts
2-npm i [email protected]
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

[mrudowski]

Please do not close this issue yet because the problem still exist:

as @uzair-suria said:

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.

[abhishek-chhipa]

npm i [email protected]

but so many packages are depricated in 3.4.4

[pierorolando1]

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

[CristianMoreno45]

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.

@mowasfi7 ... Tks... Perfect

[joselara-bit]

I have the issue in Expo, could this solution solved my problem in Expo?

[Jarrodsz]

All solutions none work.
How to resolve this issue??! I have to restart the whole app to see any change, this is not do-able!

[frazierzak]

Just want to chime in and say this issue is still not resolved. Using react-scripts 4.0.3 and the only work-around I've found to be effective is the .env change that was listed above.

PLEASE fix this. A lot of us junk up our index.js, don't shame us!

[co-bby]

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

[rzk-linesofcode]

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

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

[Harshit095]

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 😃

Worked!!
Thanks

[dhanushkac]

FAST_REFRESH= false is also worked for me, but will this be solved officially? This is a workaround I guess it is not ideal to do it all the time.

[naimishkalena]

I also had the same problem but I got the fix.
https://github.com/gaearon/react-hot-loader
Thanks @loren138

[fazzysyed]

no solution working for me i made the changes in the code but in the browser, changes are not refleacting

[dhanushkac]

no solution working for me i made the changes in the code but in the browser, changes are not refleacting

Did you restart the server after creating .env file with parameter?

[anhay1999]

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

thanks this worked for me!

[co-bby]

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

thanks this worked for me!

if you are on windows use the PowerShell or move the project to WSL (~home/ ) directory

[Immunomodyluator]

Хотя добавление "FAST_REFRESH= false" в файл ".env" решило мою проблему, но вопрос здесь в том, когда эта проблема будет решена React официально.Не каждый новичок может потратить 1-2 часа только на эту небольшую проблему.Ожидание устранения этой проблемы как можно скорее.

It`s works.

[akbarob]

this issue still exists wonder why