Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating Files Does not Cause HMR Reload #659

Closed
danielstern opened this issue Sep 16, 2016 · 51 comments
Closed

Updating Files Does not Cause HMR Reload #659

danielstern opened this issue Sep 16, 2016 · 51 comments

Comments

@danielstern
Copy link

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
Copy link

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
Copy link

ippa commented Sep 16, 2016

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
Copy link

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
Copy link
Contributor

gaearon commented Sep 16, 2016

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
Copy link
Contributor

SpaceK33z commented Sep 17, 2016

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
Copy link
Contributor

gaearon commented Sep 17, 2016

@SpaceK33z

Thanks for jumping in. I totally forgot about it.

@danielstern @tbillington @ippa @cpeele00

Does this help?

@cpeele00
Copy link

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

@ippa
Copy link

ippa commented Sep 18, 2016

@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
Copy link
Contributor

gaearon commented Sep 18, 2016

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

screen shot 2016-09-18 at 14 41 39

@SpaceK33z
Copy link
Contributor

SpaceK33z commented Sep 18, 2016

@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
Copy link

GramParallelo commented Sep 19, 2016

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
Copy link
Contributor

gaearon commented Sep 19, 2016

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

@danielstern
Copy link
Author

@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
Copy link
Contributor

@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
Copy link

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

@qjflores
Copy link

@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
Copy link

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

@SpaceK33z
Copy link
Contributor

SpaceK33z commented Dec 2, 2016

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
Copy link
Contributor

gaearon commented Dec 2, 2016

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

@elynde
Copy link

elynde commented Dec 28, 2016

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
Copy link

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

@gaearon
Copy link
Contributor

gaearon commented Feb 4, 2017

Have you checked all documented causes?

@andrii-yarmola
Copy link

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

@s-ilya
Copy link

s-ilya commented Feb 6, 2017

In my case it seems like global [email protected] 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
Copy link
Contributor

gaearon commented Feb 6, 2017

@s-ilya
Copy link

s-ilya commented Feb 7, 2017

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

@merlinstardust
Copy link

merlinstardust commented Feb 11, 2017

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
Copy link

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
Copy link
Contributor

gaearon commented Feb 12, 2017

@andrii-yarmola

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

@merlinstardust
Copy link

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

@gaearon
Copy link
Contributor

gaearon commented Feb 15, 2017

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

@AJamesPhillips
Copy link
Contributor

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

@gaearon
Copy link
Contributor

gaearon commented Feb 21, 2017

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

@merlinstardust
Copy link

@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
Copy link

@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
Copy link

ty-cs commented Mar 26, 2017

@SpaceK33z which worked for me! thx!

@johnquillen
Copy link

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
Copy link

tlrmlr commented Apr 28, 2017

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

@andriyartemenko
Copy link

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

@nuragic
Copy link
Contributor

nuragic commented May 21, 2017

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). :feelsgood:

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
Copy link
Contributor

gaearon commented May 22, 2017

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

@gaearon
Copy link
Contributor

gaearon commented May 22, 2017

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

@gaearon gaearon closed this as completed May 22, 2017
@huasambo
Copy link

huasambo commented Jun 6, 2017

@SpaceK33z thanks, works like a charm

@frederickfogerty
Copy link

@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
Copy link

awgv commented Sep 26, 2017

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
Copy link

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
Copy link

@SpaceK33z thanks.

@elmario89
Copy link

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
Copy link

nzhtrtlc commented Apr 9, 2018

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

@frodood
Copy link

frodood commented Oct 19, 2018

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
Copy link

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

@lock lock bot locked and limited conversation to collaborators Jan 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests