React-native: Packager does not see changes to files. Reload does not work.

[lernerbot]

When I first started my project, reloading without recompiling worked. Somewhere along the way I broke this.

When I run the project from Xcode, the packager terminal window opens fine but it doesn't see the changes I'm making to the JS files. I'm using Atom as my editor.

This is as far as it gets:
React packager ready.

[11:06:24 AM] Crawling File System (7704ms)
[11:06:24 AM] Building in-memory fs for JavaScript
[11:06:26 AM] Building in-memory fs for JavaScript (2430ms)
[11:06:26 AM] Building Haste Map
[11:06:28 AM] Building Haste Map (2290ms)
[11:06:28 AM] Building Dependency Graph (12430ms)

I've tried uninstalling watchman. Updating and upgrading homebrew. Killing the process and restarting. Rebooting computer. Nothing seems to get it back to the old way.

[facebook-github-bot]

Hey lernerbot, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If this is a feature request or a bug that you would like to be fixed by the team, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• We welcome clear issues and PRs that are ready for in-depth discussion; thank you for your contributions!

[chirag04]

@lernerbot Is the app loading? I don't see a network request for the bundle in your terminal output.

StackOverflow and Discord #react-native channel is the best way to get help on issues like this.

[lernerbot]

Yes, the app is loading if I run it from Xcode. Sometimes I have to wait up to 10 seconds after saving the file for the changes to be seen.

This is the full output:

┌────────────────────────────────────────────────────────────────────────────┐
│ Running packager on port 8081. │
│ │
│ Keep this packager running while developing on any JS projects. Feel │
│ free to close this tab and run your own packager instance if you │
│ prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/Users/lernerbot/reactnative/BeaconMobile

[11:06:16 AM] Building Dependency Graph
[11:06:16 AM] Crawling File System
[11:06:16 AM] Loading bundles layout
[11:06:16 AM] Loading bundles layout (1ms)

React packager ready.

[11:06:24 AM] Crawling File System (7704ms)
[11:06:24 AM] Building in-memory fs for JavaScript
[11:06:26 AM] Building in-memory fs for JavaScript (2430ms)
[11:06:26 AM] Building Haste Map
[11:06:28 AM] Building Haste Map (2290ms)
[11:06:28 AM] Building Dependency Graph (12430ms)

[thomasvm]

I had the same problem. All of a sudden the packager stopped bundling when I changed files. This had been working for months without problems.

What I discovered was that my .git/ directory had an index.lock file. Once I deleted that file, the automatic re-bundling started working again.

[cosmith]

I'm getting crazy with this, both react-native start and react-native bundle seem to be stuck on an old version of my code that doesn't exist anywhere anymore! Cleaning, deleting, re-cloning my repo didn't help...

[edit] rebooting my computer seemed to do the trick...

[pcottle]

I'm getting this too. It seems to be a watchman bug perhaps, since running

• watchman watch-del-all

and then reloading works after. I'm on watchman 4.3.0 -- what version is everyone else using?

[pcottle]

Hrm, downgrading to watchman 4.1.0 seems to have helped the issue.

[PhilippKrone]

For me, it helped to start react-native bundle with the option --verbose, get the cache directory out of the log (for me, its /var/folders/jf/j39xsb090795rm8l98qjdff80000gn/T/) and do a rm react-packager* in there. After that, it's using the latest version of the files again.

[respectTheCode]

I ran into this same problem with watchman 3.9.0

[jsierles]

Given this issue seems connected to many different situations and problems, and the fact that watchman has progressed, we're closing this issue in favor of more reproducible examples.

If you run into this, please try removing the packager cache as mentioned above, or the watchman watch-del-all command before submitting another issue. Thanks!

[hirenchauhan2]

I am having the same issue of Packager on windows. It is too slow while performing the initial tasks( probably have to wait for 5-10 mins to get ready for request).

After some modification to .js file ut does not reloads the app not even hot reloading.

Enabling the Live reload / Hot reloading also doesn't works.

Updated node to 6.2.0 and npm v 3.8.9
But all the deps were installed via Node 4.4.5

After updating the node but still file changes are not detected and packager serves the old app bundle on every request.

Thanks!

[anraiki]

Yep. Having the same problem as Harry008.

[yooneskh]

also have the same problem, in windows. the packager is serving old files and i dont know where the cache is ...

[anraiki]

i found a fix by using a new package watcher

On Jul 15, 2016 7:27 AM, "YoonesKh" [email protected] wrote:

also have the same problem, in windows. the packager is serving old files
and i dont know where the cache is ...

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/4357#issuecomment-232965368,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AD0wdEaOrMNEfn8Kpt5RNp04_BNO2TWrks5qV5jPgaJpZM4Gpd6i
.

[yooneskh]

@anraiki can you please explain?

[anraiki]

I opt for a solution by replacing their new "watching" packager. It's in
alpha sadly, but apparently it fixed my problem.

https://github.com/facebook/watchman/issues/19

It doesn't hurt to try it.

On 7/15/2016 8:25 AM, YoonesKh wrote:

@anraiki https://github.com/anraiki can you please explain?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/4357#issuecomment-232983004,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AD0wdJm2aMi4Bgaolz2N1jNLcK455Bj3ks5qV6ZugaJpZM4Gpd6i.

[yooneskh]

@anraiki it fixed my problem too. thank yoo.

[new-xd]

@anraiki @yooneskh How to replace watchman ?
same issue.

"react": "15.2.1",
"react-native": "0.30.0",

OS: windows7

I download the new watchman, add it to PATH and
(current path is E:temp2RouterTest)

1. watchman watch-del-all
2. watchman watch E:temp2RouterTest
3. react-native start
4. reload js on genymotion
   I get error index.android.js not found.
   then I change some lines in index.android.js and reload js again.
   I get this error in terminal

[23:06:27] <END>   find dependencies (2354ms)
Error: Unable to find file with path: E:\temp2\RouterTest\node_modules\react-nat
ive\packager\react-packager\src\Resolver\polyfills\prelude.js
    at Fastfs.readFile (E:\temp2\RouterTest\node_modules\react-native\node_modul
es\node-haste\lib\fastfs.js:141:15)
    at E:\temp2\RouterTest\node_modules\react-native\node_modules\node-haste\lib
\Module.js:168:49
    at Cache.get (E:\temp2\RouterTest\node_modules\react-native\node_modules\nod
e-haste\lib\Cache\index.js:64:103)
    at Polyfill.read (E:\temp2\RouterTest\node_modules\react-native\node_modules
\node-haste\lib\Module.js:167:26)
    at Bundler._toModuleTransport (index.js:549:14)
    at module._toModuleTransport.then (index.js:394:14)
    at Array.map (native)
    at index.js:411:48
    at tryCallOne (E:\temp2\RouterTest\node_modules\react-native\node_modules\pr
omise\lib\core.js:37:12)
    at E:\temp2\RouterTest\node_modules\react-native\node_modules\promise\lib\co
re.js:123:15

[yooneskh]

watch out for any watchman that node or chocolatey or anything else might
have installed

On Thu, Jul 28, 2016, 20:07 New [email protected] wrote:

@anraiki https://github.com/anraiki @yooneskh
https://github.com/yooneskh How to replace watchman ?
same issue.

"react": "15.2.1",
"react-native": "0.30.0",

OS: windows7

I download the new watchman, add it to PATH and

(current path is E:temp2RouterTest)

1. watchman watch-del-all
2. watchman watch E:temp2RouterTest
3. react-native start
4. reload js on genymotion
   I get error index.android.js not found.
   then I change some lines in index.android.js and reload js again.
   I get this error in terminal

[23:06:27] find dependencies (2354ms)
Error: Unable to find file with path: E:temp2RouterTestnode_modulesreact-nat
ivepackagerreact-packagersrcResolverpolyfillsprelude.js
at Fastfs.readFile (E:temp2RouterTestnode_modulesreact-nativenode_modul
esnode-hastelibfastfs.js:141:15)
at E:temp2RouterTestnode_modulesreact-nativenode_modulesnode-hastelib
Module.js:168:49
at Cache.get (E:temp2RouterTestnode_modulesreact-nativenode_modulesnod
e-hastelibCacheindex.js:64:103)
at Polyfill.read (E:temp2RouterTestnode_modulesreact-nativenode_modules
node-hastelibModule.js:167:26)
at Bundler._toModuleTransport (index.js:549:14)
at module._toModuleTransport.then (index.js:394:14)
at Array.map (native)
at index.js:411:48
at tryCallOne (E:temp2RouterTestnode_modulesreact-nativenode_modulespr
omiselibcore.js:37:12)
at E:temp2RouterTestnode_modulesreact-nativenode_modulespromiselibco
re.js:123:15

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/4357#issuecomment-235932927,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AKFfVeK1QtVB3CJnavy2M6YVeSGVSEH6ks5qaMyggaJpZM4Gpd6i
.

[k0mikus]

I'm having the same problem here. Can anyone help me out? It appears that my packager is not bundling it. Everytime I make changes and do Cmd+R, it blinks the screen but not loading any changes.

Xcode 7.3
Watchman 4.6
React Native 0.30

[torgeir]

Ditto @k0mikus, on the same versions except RN 0.31, react-native start doesn't seem to do any bundling on start either.

[Philip-Nunoo]

@thomasvm removing .git/index.lock also worked for me.

[surbina]

On Windows 7, I updated node and npm to its latest version and that fixed the problem for me.

[lyahdav]

In my case this happened because I had accidentally deleted watchman. Weird that there was no error message. Once I reinstalled watchman and re-ran npm start there were a ton of queued up reloads. I had to kill the server once more, run watchman watch-del-all, then rerun npm start and everything was fine. This also fixed an issue I was having where the initial find dependencies step of the packager was really slow.

[oportocala]

I had this same issue, installing with yarn, instead of the usual npm.
Turns out yarn.lock causes watchman to stop looking for changes.

WUT.
Somebody should get on it, especially since it's on the blog that yarn is now supported

So try this:
$ rm yarn.lock
$ npm start

My specs:
node v6.9.1
watchman 4.7.0
Sierra OSX (10.12.11)

Thanks to @thomasvm /.git/index.lock comment for the clue

[neiker]

I run watchman watch-del-all && watchman shutdown-server, remove yarn.lock and I dont have a lock on git.
Nothing works.

watchman v4.7.0
node v7.1.0
macOS Sierra (10.12.1)
RN 0.37 (but also happen on 0.35)

Yesterday RN packager stop to work, it freeze here:

native-ios git:(master) ✗ npm start

[email protected] start /Users/neiker/native-ios
node node_modules/react-native/local-cli/cli.js start

So I deleted watchman and reinstall it. Now packager seems to work fine, but dont rebuild when I make changes.

[manifestinteractive]

For anyone still having this issue, I found another cause of it:

Live Reload is Not Working:

1. Check if there is a .lock file in the root directory, if there is, watchman will ignore the changes in the directory, and Live Reload will fail. If you ran react-native init MyProject and had yarn installed, you will likely have a yarn.lock file in the root of your project folder, as mentioned above.

2. [My Issue] There might be a problem with watchman not being able to actually watch file changes. Even if It appears that watchman is running, it might not actually be. Even using watchman watch-list to verify your project is being watched does not guarantee it is working.

You'll need to shut down the React Native app before you can proceed to the next step. If you are running the app via npm start you will just need to stop that process. If you are running the Simulator, you will need to close all those.

Next you will need to remove the watchman user directory.

rm -fr /usr/local/var/run/watchman/$USER-state

Now you should be able to restart the app however you want, and Live Reload should be good to go. My Live Reload issues were only able to be fixed by using this method.

[manifestinteractive]

@neiker just a note to you specifically as you seem to have been suffering the same issue I did, my last comment was the solution that worked for me. Would be curious if it solves your issue too.

Basically, watchman was in a state where somehow when it was launched, something must have gone wrong behind the scenes, and it left watchman in an unstable state. Deleting the user's specific state folder when watchman was not running allowed it to reset the next time it was launched.

Certainly seems like its more of an issue with watchman that with react-native, but since there is no transparency into seeing when watchman fails since it is instantiated by react-native, there might be a solution within react-native to watch for this specific issue.

[MarlBurroW]

Thank you very much @manifestinteractive !

I was stuck with this issue for 2 days and rm -fr /usr/local/var/run/watchman/$USER-state has fixed it.

[manifestinteractive]

@MarlBurroW I think what is technically happening is the $USER-state directory ends up having a lingering PID file in it from a watchman instance that tried to run, but failed for some reason. There also seemed to be a task file in there that was keeping track of what to watch. So it looked like somehow watchman was getting queued up by react-native and watchman was reporting that it was running correctly, but the specific directory that react-native was asking to watch was not actually even able to be watched because of some corruption in the $USER-state directory. Wiping it out 100% was the only way I could make 100% sure things would reset correctly. It might not need to be wiped out all the way, and if anyone knows of the specific file that is actually causing the issue to remove, that would be great to know.

I am not sure if its possible for react-native to check for this failure somehow. Since it is happening transparently ( since react-native is what actually queued up watchman ) it seems like some QA check to make sure that watchman actually got the command might be in order, if it's not already.

[neiker]

@manifestinteractive Sorry, I can't be useful, I change my computer last week and started from scratch.

[aurelkurtula]

I have been messing around with this all day and I get it working. So incase it helps anyone, all I did was npm uninstall yarn. yarn had a .lock file but just removing that did not work. After that I just ran npm start and everything is working.

(I guess, for future reference, first search for a .lock file where ever it might be and remove it)

[theSupermacy]

Solution of this issue is given in below link

https://github.com/facebook/react-native/issues/10889

[manifestinteractive]

@theSupermacy for some reason your link is broken, reposting here:

https://github.com/facebook/react-native/issues/10889

[theSupermacy]

@manifestinteractive Sorry Fixed My Mistake :)

[tmaximini]

unfortunately none of the proposed solutions worked for me. hot reloading in my project stopped working over night it seems. (I see the little indicator saying "hot reloading" but the views don't update to my changes, I have to hard reload each time).

XCode 8.2.1
react-native 0.40
watchman 4.7.0

edit: It does work, it does just for some reason do not reload some of my nested components.

[zjhiphop]

Hi， guys. After i uninstalled yarn, and removed yarn.lock file and .git/index.lock file, still not works for me.

react-native-cli: 2.0.1
react-native: 0.42.0

[Braidio]

Building on to what @manifestinteractive said. All I did to fix this was

ps aux | grep watchman
kill -9 "watchman pid"

It was a call that went feral. Thanks!

[renehauck]

I use typescript and it helped nothing from the posts. Then I changed the file tsconfig.json and now it works perfectly. :+1:

tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "jsx": "react",
        "allowJs": true,
        "sourceMap": true
    }
}

[sir-gon]

Doing a

find /path/to/app -name '*.lock'

I got:

/path/to/app/android/.gradle/3.3/taskArtifacts/taskArtifacts.lock
/path/to/app/android/.gradle/3.3/tasks/_app_compileDebugJavaWithJavac/localClassSetAnalysis/localClassSetAnalysis.lock
/path/to/app/android/.gradle/3.3/tasks/_app_compileDebugJavaWithJavac/localJarClasspathSnapshot/localJarClasspathSnapshot.lock
/path/to/app/android/.gradle/3.3/tasks/_react-native-i18n_compileReleaseJavaWithJavac/localClassSetAnalysis/localClassSetAnalysis.lock
/path/to/app/android/.gradle/3.3/tasks/_react-native-i18n_compileReleaseJavaWithJavac/localJarClasspathSnapshot/localJarClasspathSnapshot.lock
/path/to/app/android/.gradle/3.3/tasks/_react-native-share_compileReleaseJavaWithJavac/localClassSetAnalysis/localClassSetAnalysis.lock
/path/to/app/android/.gradle/3.3/tasks/_react-native-share_compileReleaseJavaWithJavac/localJarClasspathSnapshot/localJarClasspathSnapshot.lock
/path/to/app/android/.gradle/3.3/tasks/_react-native-vector-icons_compileReleaseJavaWithJavac/localClassSetAnalysis/localClassSetAnalysis.lock
/path/to/app/android/.gradle/3.3/tasks/_react-native-vector-icons_compileReleaseJavaWithJavac/localJarClasspathSnapshot/localJarClasspathSnapshot.lock
/path/to/app/android/.gradle/3.3/tasks/_realm_compileReleaseJavaWithJavac/localClassSetAnalysis/localClassSetAnalysis.lock
/path/to/app/android/.gradle/3.3/tasks/_realm_compileReleaseJavaWithJavac/localJarClasspathSnapshot/localJarClasspathSnapshot.lock
/path/to/app/android/.gradle/4.0-20170417000025+0000/fileContent/fileContent.lock
/path/to/app/android/.gradle/4.0-20170417000025+0000/fileHashes/fileHashes.lock
/path/to/app/android/.gradle/4.0-20170417000025+0000/javaCompile/javaCompile.lock
/path/to/app/android/.gradle/4.0-20170417000025+0000/taskHistory/taskHistory.lock
/path/to/app/android/.gradle/4.0-milestone-1/fileHashes/fileHashes.lock
/path/to/app/android/.gradle/buildOutputCleanup/cache.properties.lock
/path/to/app/ios/Podfile.lock
/path/to/app/ios/Pods/Manifest.lock
/path/to/app/node_modules/envinfo/yarn.lock
/path/to/app/node_modules/fileset/yarn.lock
/path/to/app/node_modules/jsx-ast-utils/yarn.lock
/path/to/app/node_modules/react-native-fs/android/.gradle/3.5/taskHistory/taskHistory.lock
/path/to/app/node_modules/react-native-fs/yarn.lock
/path/to/app/node_modules/react-native-i18n/example/yarn.lock
/path/to/app/node_modules/realm/tests/.lock

So I have deleted them:

find /path/to/app -name '*.lock' -exec rm -vfr "{}" \;

Now is working (I'm not sure if this action solved the problem).

[DmitryKvant]

Solutions for me -
remove the project from the app.json file in the root of the project

"packagerOpts": {        "nonPersistent": "--nonPersistent"      }

[llvc]

@thomasvm You are right. I could see the update by reloading after removing index.lock file in .git directory.
Thanks alot

[anwarhamr]

I was having a similar issue, updates to index.js in RN 0.52 didn't update on actual phone. Finally found that rm -rf node_modules && npm install did the trick.

[RobertTadevosyan]

_# ###SOLUTION

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

OUTPUT will be :
c:UserslengerDesktopwebrowser>react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
Scanning folders for symlinks in c:UserslengerDesktopwebrowsernode_modules (43ms)
Scanning folders for symlinks in c:UserslengerDesktopwebrowsernode_modules (38ms)
Loading dependency graph, done.
bundle: start
bundle: finish
bundle: Writing bundle output to: android/app/src/main/assets/index.android.bundle
bundle: Done writing bundle output

and after

Run react-native run-android again, you will find your modification work.

from https://lengerrong.blogspot.am/2018/01/react-native-run-android-do-not.html

[rapando]

If everything fails, check your code and see if you are importing a module that has not been installed. Sometimes RN fails silently and shows you the last working code.

[hegelstad]

Anybody know why watchman is shut down by a mere .lock file?

[mrceperka]

Check if u have Hot reloading enabled in emulator. It is not enabled by default probably.
Press Ctrl+M and select Enable Hot Reloading

[rahulv1992]

Sounds silly. But, It was not working for me because I was running it on XCode with Release configuration. Changing it to Debug worked.

[hegelstad]

This is still happening. Why...

index.lock in .git directory kills the watchman...

[kukuandroid]

If you are using Expo, try to configure this setting in packager-info.json

{
  "expoServerPort": null,
  "packagerPort": null,
  "packagerPid": null,
  "expoServerNgrokUrl": null,
  "packagerNgrokUrl": null,
  "ngrokPid": null
}