React Native: NodeJS and Expo Start Failure

Recently I was looking at doing some React Native work so that I can quickly get some Android and iOS prototypes up and running to help me build the app that I actually want to get onto the Apple App Store and the Google Play Store.

To help me get a better understanding of what I need, I looked at several YouTube videos. The tutorials/guides were extremely useful, however I encountered an issue that was not present in the videos. When I ran the following command on my computer:

npm start

instead of the Expo DevTools running locally in my browser until I force killed it through Command Prompt, it would crash immediately and my Command Prompt would display an Unterminated Character Class error like below:

C:\Development\Android\React Native\Tutorials\rn-first-app>npm start

> @ start C:\Development\Android\React Native\Tutorials\rn-first-app
> expo start

Starting project at C:\Development\Android\React Native\Tutorials\rn-first-app
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class. Run CLI with --verbose flag for more details.

Metro Bundler process exited with code 1
Set EXPO_DEBUG=true in your env to view the stack trace.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ start: `expo start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

After doing some Googling, I found this super handy StackOverflow page (answer linked) which has several answers that talk about specific NodeJS versions that have this problem and downgrading to an earlier version (I had installed NodeJS 12.13.1, which at the time was the latest recommended version to install) fixed it. Or you could modify a specific JavaScript file that was not escaping correctly.

I decided to modify the blacklist.js file instead of downgrading my NodeJS version. The StackOverflow page linked above outlines what needs to be changed in the file. If you are using an editor like Visual Studio Code then with the syntax highlighting you will notice the difference once the \ is added to line 15 of the file. It basically goes from:

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

to this:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

Now this issue may only affect Windows due to the nature of how the slashes are escaped and respected (different OS do things slightly differently). So if you encounter this problem, either downgrade your NodeJS version, or if you don’t want to do that then modify the offending JavaScript file. Also it would be worthwhile to go visit that StackOverflow page and bump up the answer. As developers we need to help each other out and share as much information as possible to help make the world a better place.