React create app hot reload is not always working on linux

Question

I created a react application using create-react-app boilerplate, which seems to be very popular, hot reload some times updates when any of the files changes and some times not, seems like there is a minimum duration or something like that, I'm using Ubuntu, node version 7.0, the script in package.json is npm:'react-script start' what I am missing ?

I mean how you edit and manage your project files, maybe a typo is causing react to don't update. Fix code errors and it will reload. — Adolfo Onrubia, May 24 '17 at 13:32
mmm I don't think so.. it some times work normally... and then stops.. and then works... has not rules... — challenger, May 25 '17 at 10:52

score 53 · Accepted Answer · edited Apr 28 '21 at 08:22

When npm start doesn’t detect changes, below are the common troubleshooting steps provided in the create-react-app documentation - link.

While an app is running with npm start and updating code in the editor should possibly refresh the broswer with the updated code. If this doesn’t happen, try one of the following workarounds:

If the project files are directly synced to your local system from a cloud storage like Dropbox or Google Drive and you're trying to run the app in them directly, try moving it out.
Due to Webpack bug, you may need to restart the watcher. If the watcher doesn’t detect the index.js and you’re referencing it by the folder name.
Safe write feature in editors like Vim and IntelliJ currently breaks the watcher. You will need to disable it.
Due to Webpack watcher bug, projects with path contains parentheses causes issue, try moving the project to a path without them. .
To allow more watchers in Linux and macOS, you might need to tweak system settings.
If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an .env file in your project directory if it doesn’t exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start, the watcher uses the polling mode, as necessary inside a VM.
Could try increasing max_users_watches- link

More references:

Increasing max_users_watches works great when suddenly hot reload stops working without a reason. — Adrian, Aug 23 '19 at 12:03
It was 6. for me, that solution works for virtual box(what I'm using), thanks! — Shai Rippel, Sep 11 '19 at 13:47
I'm using windows subsystem for Linux (WSL 2) and the 6 worked for me — JoelBonetR, Jul 22 '21 at 11:12

score 12 · Answer 2 · answered May 26 '17 at 13:55

12

Try these:

Turn off safe write in your IDE
Increase max_user_watches
Your path should not have parentheses

as last resort try to use this as your env variable: CHOKIDAR_USEPOLLING=true npm start

Sources: https://github.com/facebookincubator/create-react-app/issues/659 https://github.com/facebookincubator/create-react-app/issues/1049#issuecomment-261731734

answered May 26 '17 at 13:55

Lukáš Gibo Vaic

3,960
1
18
30

1

you even can not imagine how many hours I have tryed to fix hot reload... only your answer had helped, thank you a lot! you are my God) – kuka Aug 10 '18 at 14:54
2

No luck with all other workarounds, but your last resort worked. My environment is Ubuntu, VS Code, CRA. – René Steetskamp Mar 04 '19 at 10:30
the last CHOKIDAR_USEPOLLING env variable have done the trick for me but it slow down my vm drastically. Any clues on that ? – jmcollin92 Nov 16 '19 at 12:39
2

the CHOKIDAR_USEPOLLING=true does the trick for you consider using another env variable CHOKIDAR_INTERVAL=2000 . This limits the amount of CPU used by CHOKIDAR polling method – jmcollin92 Nov 16 '19 at 14:39

score 5 · Answer 3 · answered Mar 14 '19 at 09:53

5

I was able to make this work using:

sudo npm start

answered Mar 14 '19 at 09:53

probhonjon

302
5
8

Didnt work for me but `CHOKIDAR_USEPOLLING=true npm start` did. WSL Ubuntu 20 – chia yongkang Oct 04 '21 at 13:58
never run command with sudo unless it really needs super user permission. – Mostafa Ahangarha Jun 10 '22 at 15:33

score 5 · Answer 4 · answered Sep 12 '19 at 23:30

5

run this command

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

answered Sep 12 '19 at 23:30

brian bentancourt

146
2
5

score 1 · Answer 5 · answered Aug 21 '19 at 00:10

1

try deleting the node_modules folder and reinstall by using cmd npm install

worked for me ( ubuntu 18.04.3 LTS )

answered Aug 21 '19 at 00:10

yasir jafar

167
1
9

This worked for me when switching from Hyper Terminal to Kitty in Ubuntu – alextrastero Aug 24 '22 at 08:58

Bimal Grg · Answer 6 · 2018-07-03T11:21:53.327

In unbuntu, i basically kill all the process running on port (for react app default is :3000).

List all the process running on port 3000.

lsof -i :3000

This command will show something like this.

COMMAND   PID USER   FD   TYPE  DEVICE SIZE/OFF NODE NAME
node     7429 yipl   19u  IPv4 1081760      0t0  TCP localhost:3000->localhost:35762 (ESTABLISHED)
chrome  26448 yipl  177u  IPv4 1080082      0t0  TCP localhost:35762->localhost:3000 (ESTABLISHED)

Now kill the process by PID.

kill -9 7429
kill -9 26488

Start your react app again.

score 0 · Answer 7 · answered Oct 26 '18 at 09:15

Apparently hot module reloading only works out-of-the-box if you eject your app.

But if you haven't ejected your app, then you can follow these instructions to get it working.

Find the ReactDOM.render(...) at the top of your app, and add these lines below it:

ReactDOM.render(...);

if (module.hot) {
  module.hot.accept('./App', () => {
    // --- Copy-paste your usual ReactDOM.render(...) call here: --- //
    ReactDOM.render(...);
  });
}

The instructions linked above also show how to hot reload things outside of the component tree, such as redux reducers.

score 0 · Answer 8 · answered Mar 07 '19 at 02:28

One additional case I just experience is when using multiple version of nodejs with NVM in parallel. Basically, I have two terminal windows, one run node 10.x, other on node 9.x, and Webpack watcher stops seeing change.

The solution is to bring both to the same node version

score 0 · Answer 9 · answered Dec 21 '20 at 13:25

sudo npm start

i dont know more about linux, but it is probably due to firewall settings, as i have done the same in windows and there to start react dev server we need to give the access through firewall, so to do the same here we need to give it the admin permision(sudo in case of a ubuntu linux distribution).

score 0 · Answer 10 · answered Jan 31 '21 at 22:09

0

If you start your app with a bunch of errors it seems to stop watching your files and thus will not detect your fixes to the broken files. It seems as if you need to initiate "start" with not too many/severe errors for the file watcher to work.

answered Jan 31 '21 at 22:09

mufasa

1,271
13
18

score 0 · Answer 11 · answered May 22 '23 at 20:26

0

Easy solution,

Hope this helps.. https://stackoverflow.com/a/76309632/8243241

need to add react-error-overlay v6.0.9

and add this to package.json below the dependencies "resolutions": { "react-error-overlay": "6.0.9" },

answered May 22 '23 at 20:26

mainak

1,886
2
9
19

React create app hot reload is not always working on linux

11 Answers11

Linked