TL;DR;

Avoid the rabbit holes. Update everything, though don’t update anything if you are in the middle of a big project. Don’t globally install watchman if you are running React Native locally, i.e. `npx react-native start`

Why return to React Native

There is the possibility of a project coming up that uses React Native and I’m quite familiar with React Native. In 2016 I was working as a contractor with a small team. I enjoyed working in React Native once we got through all of the agonizing configuration, bugs, and early adoption chaos that comes with using bleeding-edge tech. It was great fun blazing a trail and solving problems in a framework that one or two other people in the world were running into if we were lucky. It was an exciting new frontier and in some ways it still is.

 

 

What’s the Environment, Kenneth?

I’m running node 13.10.x and that should be just fine. It’s not most recent. I’m not currently running OS X Catalina, which shouldn’t matter, I’ll just begin with developing on Android. I need to `brew install watchman` no problem. The Java development kit is already installed, JDK8. The latest Android SDK is installed, I dabble in Android, and as stated this isn’t my first time working with React Native. So far so good. Okay now run `npx react-native init AwesomeProject` “npx?” That’s npm’s package runner. Okay, it’s doing its thing. . .
 

. . . wah-wah (sad trombone) It fails to build and says I need the latest version of xcode. Ugh, that also means I need the latest version of OS X, Catalina. Ouch. I should have known I wasn’t going to get through this without a few bruises.

***TL;DR;*** Being a version behind on ANYTHING is inviting pain.

 

Hell No World

(…Hours later…) I’ve got Catalina running, it seems fine. It will probably kill this old Mac-book pro of mine but whatever. Xcode is now up to date. ITerm, what is going on? Why have I lost all of my aliases? Oh, I’m not using bash!?  Why am I using zshell? What the hell!?

(cursing) (more cursing) (eating) (more cursing) (an hour of research) okay, so Apple didn’t like some licensing with bash and has forced zshell on me. Can I at least get back to the React Native project? I’m back to the parent directory and I nuke the “AwesomeProject” to attempt a fresh go of it. Here we go `npx react-native init AwesomeProject`. “No,” the prompt says. Node isn’t installed. 

(more cursing) Homebrew is still accessible surprisingly so I install nvm again and make whatever environment variables available in my `.zshrc` And I install node and watchman again as directed by the instructions for starting a React Native project.

 

***TL;DR;*** The major OS X upgrade was practically a factory reset. Hello zshell. Zshell seems better than bash for now. And I had to reinstall nvm, node and watchman.

Bundle, this is Browser, Can You Hear Me?

My software is current, and I have no proxies, or firewalls running on my machine atm. There is nothing between me and a working dead simple React Native app. Here we go, again… again,  `npx react-native init AwesomeProject` . It’s happening! The app loaded on to my Android device and now I have a white screen. Tell me what’s up debugger. The URL that has been requested is “pending.”

(cursing again) This was supposed to be three or so steps. What you may not realize is I’m now many hours into this. If I give up now it’s saying forget the possible new project and I’m done with React Native. 

 

***TL;DR;*** The packager is running but the bundle can’t be reached.

Down the Rabbit-hole

If I’m running into this as if coming to React Native completely green, someone else has most certainly had the same issue. One terminal window shows the server running and a status line at the bottom, plain white text, “Loading dependency graph…” I search for that and use various terms to describe the bundle is hanging, or not loading, pending… I dive into rabbit hole after rabbit hole. Is it a connections issue? I find lots of devs editing their sysctl.conf file and getting results. Of course with OS X Catalina the sysctl.conf has been reset and moved, so that’s… nice. I try most of that with no change. “pending” is taunting me.

I can go to localhost:8081 and I’m greeted with the “packager is running.” Metro is the server. Could that be failing to send the bundle correctly? Maybe one or two people seem to be having trouble so issues with the server seem rare. There are suggestions about only using yarn to handle dependency management and using different versions of the node. I’m trying all the things at this point. No change and I shake my middle finger at the tiny bit of text saying “pending” … Don’t let this scare you. I’m a very calm and mostly rational human being 99.4% of the time.

 

***TL;DR;*** I’m running Catalina. Don’t mess with anything that I’ve tried in this section. Don’t touch your sysctl.conf if you find it. Don’t try to tweak the Metro server. Don’t try different versions of the node. I’ll have a beer with you virtually or after the pandemic and I won’t be this rage monster ready to chuck my computer out the window.

Will the Real Watchman Please Stand Up?

I keep seeing references to fsevent, inotify, and watchman all possibly having issues running in Catalina. I installed watchman with brew. And the suggestions I’ve seen all say uninstall and reinstall it again with brew. That doesn’t seem necessary. And now that I think about it more, the OS could be blocking some read and write access that watchman is trying to do on the file system. I uninstall it. Then nuke my node modules clear my yarn cache and run `yarn add watchman` then `yarn` … Okay, I think I’m set. `npx react-native start` . . .  “Loading dependency graph…” . . . “Loading dependency graph…Done.” It works!

At 12:30 AM after too many hours trying to solve for something seemingly no-one else has tried, I got it to work!

 

***TL;DR;*** Don’t install watchman with brew. Install watchman with yarn.

FFS

Let’s not do that ever again! Issues around “Loading dependency graph…” are common and there isn’t enough feedback from the tooling to recognize the problem. That is not a good thing. Because of this dreadful experience, I recognize now that there are three unresolved open issues all worded differently but almost certainly the same problem filed against RN on Github.

I hadn’t mentioned it but I also joined a Discord React group of 70K users and a React Slack group that had more people trying asking questions and trying to solve issues with components, no solutions for me this time. I’m delighted to see an active community but I think the React Native core team desperately needs someone to focus on squashing build issues for fresh installs if the hope is to see mass adoption. There are a ton of brilliant minds behind React Native and no one should take offense to anything I’ve written. I simply had a bad experience and want to save others from the pain I’ve endured. I’ll be making things in React Native but probably not heavily recommending RN for a while. Wish me luck on my next `Hello World` app as I attempt to build one in Flutter. 

 

***TL;DR;*** If you can’t get Hello World working in React Native and if you have the choice maybe give Flutter a go.

~ Jake Berendes

#30DaysOfLearning