How do I troubleshoot a hang in React Native's Getting Started?

1k views Asked by At

I'm using the React Native Getting Started instructions. I am using a 2010 MacBook Pro with macOS Sierra 10.12.6. The computer has Node.js v8.4.0.

I'm new to React Native, and also to React and to Node, so I might be missing something basic. I do have React working on the same computer. I followed the instructions on the page above, hoping to see the npm start command start a development server and print a QR code on the terminal, as the instructions say.

The first time I tried Getting Started, I got some error messages, which you can find below. Based on those messages I installed watchman and tried npm start again. That time, the app seemed to start a server. I saw no QR code, but after a few seconds some error messages appeared and then nothing.

Here's what the shell session looked like. Some parts were lengthy (hundreds of lines) and I've left them out. I have included all errors and warnings I found.

bash-3.2$ create-react-native-app AwesomeProject # verbatim from the getting-started page
Creating a new React Native app in /Users/dvincent/Desktop/react-native-test/AwesomeProject.

Using package manager as npm with npm interface.
Installing packages. This might take a couple minutes.
Installing react-native-scripts...

[[email protected] /Users/dvincent/Desktop/react-native-test/AwesomeProject
`-- [email protected] 
  +-- @expo/[email protected] 
  | +-- [email protected] 

Here I'm leaving out hundreds of lines that don't seem important. These do seem important:

    +-- [email protected]  deduped
    +-- [email protected] 
    `-- [email protected] 

npm WARN [email protected] requires a peer of react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0 but none was installed.
Installing dependencies using npm...

[?25hnpm WARN deprecated [email protected]: connect 2.x series is deprecated
[?25h
> [email protected] install /Users/dvincent/Desktop/react-native-test/AwesomeProject/node_modules/fsevents
> node install

[fsevents] Success: "/Users/dvincent/Desktop/react-native-test/AwesomeProject/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
[[email protected] /Users/dvincent/Desktop/react-native-test/AwesomeProject
+-- [email protected] 
| +-- @expo/[email protected] 
| | `-- [email protected] 
| |   `-- [email protected]  deduped
| +-- [email protected] 
| | +-- [email protected] 
| | | +-- [email protected] 

Here I am omitting more lines, before reaching some warnings and seeing the Success! message as expected.

|   +-- [email protected] 
|   `-- [email protected] 
|     `-- [email protected]  deduped
`-- [email protected] 

npm WARN [email protected] requires a peer of react@>= 16.0.0 but none was installed.
npm WARN [email protected] requires a peer of react@>=15.4.0 but none was installed.
npm WARN [email protected] requires a peer of react@>=15.3.1 but none was installed.


Success! Created AwesomeProject at /Users/dvincent/Desktop/react-native-test/AwesomeProject
Inside that directory, you can run several commands:

  npm start
    Starts the development server so you can open your app in the Expo
    app on your phone.

and ending with the following.

We suggest that you begin by typing:

  cd AwesomeProject
  npm start

Happy hacking!

So I proceeded, like this:

bash-3.2$ cd AwesomeProject/
bash-3.2$ npm start

> [email protected] start /Users/dvincent/Desktop/react-native-test/AwesomeProject
> react-native-scripts start

1:59:58 PM: Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-native-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dvincent/.npm/_logs/2017-09-01T03_59_58_661Z-debug.log

I set aside the kernel suggestion for the time being and instead installed watchman.

bash-3.2$ npm install watchman
[[email protected] /Users/dvincent/Desktop/react-native-test/AwesomeProject
`-- [email protected] 
  +-- [email protected] 
  | +-- [email protected] 
  | `-- [email protected] 
  `-- [email protected] 
    +-- [email protected] 
    `-- [email protected] 

npm WARN [email protected] requires a peer of react@>=15.3.1 but none was installed.
npm WARN [email protected] requires a peer of react@>=15.4.0 but none was installed.
npm WARN [email protected] requires a peer of react@>= 16.0.0 but none was installed.

Then I tried to start the server again.

bash-3.2$ npm start

> [email protected] start /Users/dvincent/Desktop/react-native-test/AwesomeProject
> react-native-scripts start

2:29:06 PM: Starting packager...
***ERROR STARTING PACKAGER***
Starting React Native packager...
Scanning 767 folders for symlinks in /Users/dvincent/Desktop/react-native-test/AwesomeProject/node_modules (21ms)
Loading dependency graph.
Running packager on port 19001.


2017-09-01 14:29 node[22151] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
***ERROR STARTING PACKAGER***

2017-09-01 14:29 node[22151] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
***ERROR STARTING PACKAGER***

2017-09-01 14:29 node[22151] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)


At this point I stopped waiting and captured the shell transcript to start on this question. I left it going while writing this, for over 40 minutes, with no further output.

1

There are 1 answers

0
Sreejith Krishnan R On BEST ANSWER

This looks like a known issue when you install watchman using npm. It can be fixed by removing watchman installed using npm and installing it using homebrew.

# Remove any existing binaries
rm -rf /usr/local/var/run/watchman/
# Remove any npm globally installed instances
npm uninstall watchman
# Nuke the last brew installed version
brew uninstall watchman
# Brew install and build latest
brew install watchman

For more details see this issue.