`react-native bundle` hangs during “Loading dependency graph...

Takahiko Inayama
Feb 24, 2018 · 3 min read

TL;DR;

Reinstalling watchman may helps you.

Never ending “Loading dependency graph...

I recently created a react-native project.

Then I tried to run it on the iOS Simulator, it failed to load js bundle. For more detail, react-native cli won’t generate js bundle.

It won’t make any progress after Loading dependency graph... since react-native start have called.

There is an issue for this problem.

I run react-native bundle command to separate problems.

Yeah. Same thing happens.

Reading react-native cli

Then I decided to read source codes for react-native cli.

At first I searched the definition of the build command. This is written in react-native/local-cli/bundle/buildBundle.js like this.

I stripped some codes. But the whole build is handled by metro module.

Metro

Metro is the JavaScript bundler for React Native. Readme says.

And this is the function called from react-native cli. This calls Server class.

And Server instantiate Bundler and then call getDependencyGraph function.

Next, Bundler#getDependencyGraph calls DependencyGraph#load .

And DependencyGraph calls JestHeatMap#build

By the way, whenopts.reporter.update({tupe: 'deps_graph_loaded'}); called, Loading dependency graph... appears at the console.

jest-haste-map

This is a sub module of jest testing framework.

This library has a detailed comment about creating heat maps.

* The HasteMap is created as follows:
* 1. read data from the cache or create an empty structure.
* 2. crawl the file system.
* * empty cache: crawl the entire file system.
* * cache available:
* * if watchman is available: get file system delta changes.
* * if watchman is unavailable: crawl the entire file system.
* * build metadata objects for every file. This builds the `files` part of
* the `HasteMap`.
* 3. parse and extract metadata from changed files.
* * this is done in parallel over worker processes to improve performance.
* * the worst case is to parse all files.
* * the best case is no file system access and retrieving all data from
* the cache.
* * the average case is a small number of changed files.
* 4. serialize the new `HasteMap` in a cache file.
* Worker processes can directly access the cache through `HasteMap.read()`.

https://github.com/facebook/jest/blob/master/packages/jest-haste-map/src/index.js#L179-L195

After I read this, I suspected watchman may be the source of the problem. And I tested watchman from command line like this.

$ watchman watch .

It won’t make any response at all.

In usually, this command returns immediately. And outputs like this.

watchman watch .
{
"version": "4.9.0",
"watch": "/PATH/TO/YOUR/WOKING_DIR",
"watcher": "fsevents"
}

I couldn’t find any clue. But simply I googled “react-native apfs”. (Because I thought that file system changes since High Sierra may be related.)

And found an interesting issue.

Of course I haven’t seen any errors like this. But the suggested workaround for this is to remove watchman and reinstall it.

I simply tried this. Then…

It worked!!

Though couldn’t find detail about the root of this problem, I think it’s enough.

Takahiko Inayama

Written by

Software developer. https://www.behance.net/tetra2000

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade