Create react app, reload not working

Question

I just started coding in React using create-react-app. In the documentation it's said

The page will reload if you make edits.

I don't know which module is responsible for auto reload (webpack or react-hot-reloader?) but it's not working. I edited file using different editors (Sublime, VIM, ..) but it seems problem is for something else. Any advice how to debug it?

Gonium

Are you using npm start, or loading it by opening it from the html file. Probably a stupid question, but its worth asking sometimes... – Mute

@BobbyW I'm using npm start – Gonium

npm cache clean --force – Wortham

I have similar problem with windows. Any solution – Abrahamsen

I have a similar problem on Firefox browser but it is working fine on Chrome. – Tolmach

Answer 1

After too many searches I found Webpack watch uses inotify to observe file changes and in ubuntu it's set to a low value. a quick fix:

sudo -i
echo 1048576 > /proc/sys/fs/inotify/max_user_watches
exit

If you want change it permanently (from Ronald answer):

echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf
sudo sysctl -p

You may also need to add a .env file in the root directory of your project with this line "FAST_REFRESH=false" as noted in create react app docs.

echo "FAST_REFRESH=false\n" | cat > .env

Gonium

within what directory did you run the terminal command above? – Paganini

doesn't matter, whenever you are run it – Gonium

thanks a lot. it worked in my linux mint. but I need to run this command every time the PC restarts. any way around ? – Mammon

It worked on Linux Mint.. and easiest way to solve issue – Hultgren

Answer 2

Year 2021

I had this issue in react ^17.0.2 I fixed it by adding a .env file and setting FAST_REFRESH=false. Just create a .env file in the root directory of your project and add FAST_REFRESH=false in the file.

Linchpin

This does work. Man, it was so frustrating to manually refresh. Thank you! – Brightwork

Answer 3

For Ubuntu users, run this in the terminal:

sudo gedit /etc/sysctl.conf

Scroll to the bottom and paste:

fs.inotify.max_user_watches=524288

Save and close the editor, then run this:

sudo sysctl -p

To check your success:

cat /proc/sys/fs/inotify/max_user_watches

This should return 524288

by apsrcreatix

Ref: https://github.com/flathub/com.visualstudio.code/issues/29#issuecomment-477126012

Ludeman

Answer 4

I had the same problem in Ubuntu.

The problem was resolved by deleting node_modules and then run

yarn install // or npm install

Southey

Your solution works for me. In my case, I used npm i instead of yarn install. – Maltase

it reffers to the same thing – Southey

Answer 5

I hope to save someone else the same pain I experienced.

I'm using Windows 10 and Ubuntu 20.04 WSL, with nvm to manage node/npm.

I had to:

• Use Node v16.14.2 in nvm (which also uses npm 8.5.0)
• Change react-scripts from "react-scripts": "5.0.0" to "react-scripts": "4.0.3" in my package.json file
• Change my package.json start script to

   "start": "CHOKIDAR_USEPOLLING=true react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"

• I then ran npm install to update react scripts and restarted the bash terminal

• I also followed Ronald Araújo's advice in his answer for good measure.

5 hours later, it's finally working!

Good luck everyone!

Marquettamarquette

This did it for me on WSL2 with Ubuntu 20.04. Thanks John – Piles

I have a similar problem on Firefox browser but it is working fine on Chrome. – Tolmach

Answer 6

There actually is solution to get Fast refresh working.

Use this patch https://github.com/facebook/create-react-app/pull/11105/files From @pmmmwh

Use https://www.npmjs.com/package/patch-package for editing your dependencies.

1. install patch-package (via npm or yarn into your project)
   • npm: npm i patch-package
   • yarn: yarn add patch-package postinstall-postinstall
2. Edit package.json and add postinstall script

   "scripts": {
   +  "postinstall": "patch-package"
   }
   

3. Edit file YOUR_PROJECT/node_modules/react-dev-utils/webpackHotDevClient.js - with changes introduced in github pull request above
4. run npx patch-package react-dev-utils
5. commit changes created by this script (e.q. ./patches/react-dev-utils+11.0.4.patch)
6. run your app, now it will refresh on changes

Or wait for new release of react-dev-utils (it is not yet released, last version @11.0.3 doesn't contain this update).

Shedd

Answer 7

My hot reload in Create React app broke due to updating some packages (probably because of typescript). I had to solve it without the ejecting of CRA.

I managed to fix it by upgrading to version 16.10 of these packages:

"react": "^16.10.0",
"react-dom": "^16.10.0"

And it worked just fine!

My code in index.tsx:

...
const isDev = process.env.NODE_ENV === 'development'
const rootEl = document.getElementById('root')

ReactDOM.render(<App />, rootEl)

if (isDev && module.hot) {
  module.hot.accept('screens/App', () => {
    ReactDOM.render(<App />, rootEl)
  })
}

Hint: First try just this code (maybe you are setting wrong path)

if (module.hot) {
  module.hot.accept()
}

If this start working then you want to specify the path in order to make hot loading more effective (less bubbling = shorter loading)

Raymer

Answer 8

Try adding CHOKIDAR_USEPOLLING=true in a .env file.

Glossator

Answer 9

What worked well for me is setting WATCHPACK_POLLING to true. Simply, update your package.json with:

"start": "WATCHPACK_POLLING=true react-scripts start"

in the scripts section.

Farra

Answer 10

After create-react-app,I change my project's name.This is one of reasons which make reload not working.Then I create-react-app again,reload is working now.

Vmail

Answer 11

If the React webpage is not reloading upon saving changes, try adding this line to the App.js file:

import React from 'react';

Haileyhailfellowwellmet

Answer 12

I solved this problem by creating my React app inside the Windows Subsystem for Linux (WSL) folder, instead of creating it in any Windows directory.

Gaze