Updating Files Does not Cause HMR Reload

[danielstern]

I'm working in an application with lots of nested directories and .js files.

Sometimes, after I modify and save the file, it simply... does not update or rebuild. I have to stop the process and restart it.

What's the solution to this?

[tbillington]

I had this issue when working with a project that was in a dropbox folder. Hasn't affected any of my projects were outside the folder though.

[ippa]

Not exactly the same, but feels related: Sometimes saving a js-file doesn't trigger the livereload. When I save it a second time it works. Sorry for the lack of details, but happens every now and then and I haven't been able to pinpoint the cause. On windows 10, latest CRA, editing with vim in gitbash.

[cpeele00]

Same here. In fact I have a very simple project with no nested directories and the rebuilding/reloading is spotty at best. It will just stop rebuilding and hot-reloading so I am continuously having to stop the process and start it all over again. IMHO this is the biggest impedance to a smooth development experience with CreateReactApp. You guys have done such an amazing job thus far, if you could just get this and css preprocessors working you will have nailed it! Keep up the good work!

[gaearon]

Can you reproduce this with a freshly created app, or only in existing apps?
Has this been always happening, or just recently?
Could you please share your system versions?

[SpaceK33z]

This could be related to the "safe write" feature some editors use. See "Working with editors/IDEs supporting safe write" from the webpack-dev-server docs.

If this fixes it, and I think it will because I've seen dozens of issues in WDS because of this, I'd suggest to very clearly document this somewhere in CRA :).

[gaearon]

@SpaceK33z

Thanks for jumping in. I totally forgot about it.

@danielstern @tbillington @ippa @cpeele00

Does this help?

[cpeele00]

@gaearon I'll give it a shot and will get back to you. Thanks!

[ippa]

@SpaceK33z: that url seems broken? it doesn't jump to any specific part of the page and I can't even find the word "safe".

[gaearon]

It didn't show up for me at first but I saw it after refresh.

[SpaceK33z]

@ippa, apparently some dude renamed the whole wiki page for webpack-dev-server to "react-hot", causing some weird issues :(. I renamed it back now, so it should work again.

@gaearon haha see your comment just popping up, see above ;p.

[GramParallelo]

I have a fresh install of create-react-app on Debian 8.5 using text editor Atom and Chrome for browser. When I change App.js and save the reloading is not happening. Any ideas?

[gaearon]

Some more things to try here: https://webpack.github.io/docs/troubleshooting.html#watching

[danielstern]

@gaearon Absolutely, I was using IntelliJ. It turns out, the Safe Write feature was causing this.Is there some kind of universal editor_config setting that could disable this in editors?

[SpaceK33z]

@danielstern, unfortunately this is not supported in editorconfig. But it's a great idea I think! Maybe propose that to the people at http://editorconfig.org/ ?

[jameshibbard]

Another thing that can cause HMR to stop working is parenthesis in a path name.
webpack/webpack#2753

[qjflores]

@danielstern what did your npm tests return?

I was facing something similar and I had to increase the the max_users_watches http://stackoverflow.com/questions/16748737/grunt-watch-error-waiting-fatal-error-watch-enospc

[CodeJjang]

Thank god, this issue was driving me crazy.
The 'disable safe write' thing should be in bold in wepback docs...

[SpaceK33z]

The 'disable safe write' thing should be in bold in wepback docs...

Oh I made sure of that ;). It's mentioned in the watch docs and is explained at the top of the "how to develop" guide.

[gaearon]

Anybody wants to make a PR to Troubleshooting in CRA User Guide?

[elynde]

FWIW, i just tried create-react-app for the first time and hit this. I moved my project out of my Dropbox folder and the problem went away immediately.

[andrii-yarmola]

i have the same problem in Sublime
its windows7
its new freshly created app
its happens always

[gaearon]

Have you checked all documented causes?

[andrii-yarmola]

sry
my project path contains parentheses
ty for fast answer
/solved

[ghost]

In my case it seems like global webpack@v2.x installation caused create-react-app webpack watcher issues: it didn't see any file changes. After I removed global webpack, reinstalled create-react-app, recreated application it started to wok fine.

Sublime @ Ubuntu 16.04

[gaearon]

@s-ilya Do you mind adding this to the list in https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-start-doesnt-detect-changes?

[ghost]

@gaearon Surprisingly I can't reproduce it now. I will check again later with different versions of 2.x (if there were any).

[merlinstardust]

I'm having this issue as well, but I do not believe it to be caused by the listed issues.

My current setup is that I am running the project inside a vagrant virtual machine, and editing my files in Atom on my host machine (Windows). I was able to confirm that it's not my specific project by creating a new app with create-react-app test, and changing the App.js file after starting the server

My best guess is that it doesn't like it being a shared folder across the vm and the host.

Any ideas on how I can fix this without having to get rid of my vagrant setup?

To confirm that it's not a listed issue,

• My project is not in Dropbox
• I am using the initial project as set up by create-react-app
• I am using Atom, which I don't think has safe write
• My path does not have parentheses
• I am on Ubuntu, but checking max_user_watches gave 8192, which I assume is high

[andrii-yarmola]

I have one more question here:
HMR is really awesome, but what if i want replace a REAL JS file, not only in my localhost?
like a bundle in 'build/static/' after 'npm run build' in production,
but automatically in 'hot'-way for development
without eject
how can i do that?

[gaearon]

@andrii-yarmola

This is currently not supported but you can track #1070.

[merlinstardust]

@gaearon do you have any thoughts on how I can fix my VM issue, above?

[gaearon]

Sorry, not really. Maybe you can ask in the Webpack repo.

[AJamesPhillips]

@merlinpatt I've used the advice here successfully: #1049 (comment)

[gaearon]

@AJamesPhillips Would you like to contribute this to the relevant Troubleshooting section?

[merlinstardust]

@AJamesPhillips that worked for me, thanks. If anyone doesn't want to click the link, the advice was to use

CHOKIDAR_USEPOLLING=true npm start

[shenders13]

@s-ilya's advice worked for me.

sudo npm uninstall -g create-react-app
sudo npm uninstall -g webpack
Delete repo locally
sudo npm install -g webpack
sudo npm install -g create-react-app
git clone [insert repo url]
cd into repo
npm start

Worked a charm.

[ty-cs]

@SpaceK33z which worked for me! thx!

[johnquillen]

I just confirmed that my problem was Dropbox. sigh. When you have dropbox for business, it renames your personal Dropbox folder to Dropbox (Personal) They do not allow you to rename it. Even with a symlink, doing a ps, I see:

92308 ttys004 0:00.07 node /Users/quillen/Dropbox (Personal)/src/time2meet2/

As soon as I moved the directory out of Dropbox it worked fine with no other changes.

[tlrmlr]

@johnquillen this just saved me a lot of pain, thank you!!

[andriyartemenko]

I had this problem in WebStorm, disabled safe write in settings and now everything is fine.

[nuragic]

I had the pleasure of experiencing this same exact issue. Everything was working like a charm and suddenly the server stopped to update the bundle: it was working only on the first compile, then I needed to start and stop all the time to see the code changes. 😕 ❓

Well, finally I discovered the reason: I don't know how but basically one of my files got renamed to lowercase (e.g. Lol.js -> lol.ls).

I'm working on OSX so I did the good old hack git mv lol.js lool.js && git mv lool.js Lol.js (then commit/amend) to solve it. More info: https://coderwall.com/p/mgi8ja/case-sensitive-git-in-mac-os-x-like-a-pro

I know that's a dumb issue... however they're the worst to discover sometimes, so sharing just in case it could help somebody. 😅

[gaearon]

Hmm. I would expect that case-sensitive-webpack-plugin (which we include) would catch that.

[gaearon]

I’m going to close this since common causes and workarounds are documented.

[huasambo]

@SpaceK33z thanks, works like a charm

[frederickfogerty]

@gaearon sorry if this has been asked elsewhere

Does CRA watch files in node_modules? If not, is there a way I can move a node_module into a place where it will be watched?

[awgv]

If everything else fails, you can also try this:

• Delete any source file
• Reload localhost tab, it’ll show an error
• Stop the server
• Put the files back
• Start the server again

In my case, that was enough to kick it in the head, so that it would start compiling/reloading again.

[sdistefano]

I'm having this issue ; it only updates when I focus either on the browser or the terminal window (running i3).
I tried everything here without any luck. Running on intellij inside a virtualbox.

[sergshyn]

@SpaceK33z thanks.

[elmario89]

Anyone who has faced this problem: I have fixed the error just with renaming the folder (I had just one folder, which didn't react to updates, so I renamed it from Includes to Shared).
Maybe this will be helpful...

[nzhtrtlc]

@elmario89 Thank you so much your way is worked for me!

[frodood]

guys, im running my react app in a kubernetes pod and source is mounted from host machine. when i change my code in host npm doesn't update, how can i resolve this?

[christianwish]

On Ubuntu start dev command with sudo solves the problem for me.