How to resolve the error on 'react-native star

Question

1. I just installed node.js & cli

   • installed node.js

   • installed react-native-cli

     npm -g react-native-cli
     

2. And created a 'new project'.

   react-native init new_project
   

3. and inside that 'new_project' directory, I tired to see if metro bundler works well.

   react-native start
   

4. But the command gave me following error and metro is not starting. Any clue for fixing this error? (I'm using windows 10 OS.)

   • command : C:\projects\new_proj>react-native start

     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)

Answer 1

Go to

\node_modules\metro-config\src\defaults\blacklist.js

and replace this

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__\/.*/
];

This is not a best practice and my recommendation is: downgrade node version into 12.9 OR update metro-config since they are fixing the Node issue.

Answer 2

As a general rule, I don't modify files within node_modules/ (or anything which does not get committed as part of a repository) as the next clean, build or update will regress them. I definitely have done so in the past and it has bitten me a couple of times. But this does work as a short-term/local dev fix until/unless metro-config is updated.

Thanks!

Answer 3

A PR with a fix has been merged in the metro repository. Now we just need to wait until the next release. For now the best option is to downgrade to NodeJS v12.10.0. As Brandon pointed out, modifying anything in node_modules/ isa really bad practice and will not be a final solution.

Answer 4

[Quick Answer]

There are a problem with Metro using some NPM and Node versions.

You can fix the problem changing some code in the file \node_modules\metro-config\src\defaults\blacklist.js .

Search this variable:

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

and change to this:

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

Please note that if you run an npm install or a yarn install you need to change the code again.

Answer 5

Go to node_modules in your project directory look for metro-config\src\defaults\blacklist.js and change the var blacklist: = {....} to

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

Answer 6

You have two solutions:

either you downgrade node to V12.10.0 or you can modify this file for every project you will create.

node_modules/metro-config/src/defaults/blacklist.js Change this:

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__\/.*/
];