Metro Bundler did not started automatically, blacklist.js has some issue!

React Native version: 0.60

Steps To Reproduce

1. Create a new react-native project using “npx react-native init NewProject”.
2. Try to run it using “npx react-native run-android”.

Problems

1. Metro Bundler Server automatically starts but closes before app launches.
2. When we try to launch metro bundler manually, then it shows following error: 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. SyntaxError: Invalid regular expression: /(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/: Unterminated character class at new RegExp () at blacklist (D:\projects\new_proj\node_modules\metro-config\src\defaults\blacklist.js:34:10) at getBlacklistRE (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:69:59) at getDefaultConfig (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:85:20) at load (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:121:25) at Object.runServer [as func] (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\commands\server\runServer.js:82:58) at Command.handleAction (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\cliEntry.js:160:21) at Command.listener (D:\projects\new_proj\node_modules\commander\index.js:315:8) at Command.emit (events.js:210:5) at Command.parseArgs (D:\projects\new_proj\node_modules\commander\index.js:651:12)

Solution

Change the content of \node_modules\metro-config\src\defaults\blacklist.js file by following : var sharedBlacklist = [ /node_modules[/\]react[/\]dist[/\]./, /website/node_modules/./, /heapCapture/bundle.js/, /./tests/./ ];

to

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

Result

Finally, project runs successfully! But need to have a permanent solution.

Please read the detailed solution in comments.

[ikayz]

@tusharojha thanks man, you are a lifesaver your solution worked. I searched Stackoverflow and countless websites with no avail. Though I’d have to add that line to every project, it’s temporary. The React Native team need to fix this issue ASAP.

[ikayz]

@tusharojha I make it exactly like your screenshot.