How to resolve the error on react-native start

Question

I just installed node js  amp  cli   installed node js installed react-native-cli  npm -g react-native-cli   And created a  new project    react-native init new project  and inside that  new project  directory  I tired to see if metro bundler works well   react-native start  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 gt 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

User · Answer

I just got a similar error for the first time today. It appears in \node_modules\metro-config\src\defaults\blacklist.js, there is an invalid regular expression that needed changed. I changed the first expression under sharedBlacklist from:

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

User · Answer

I don t have metro-config in my project  now what   I have found that in pretty older project there is no metro-config in node modules  If it is the case with you  then      Go to node modules metro-bundler src blacklist js   And do the same step as mentioned in other answers  i e   Replace  var sharedBlacklist          node modules     react     dist               website  node modules            heapCapture  bundle  js              tests             with  var sharedBlacklist          node modules      react      dist                website  node modules            heapCapture  bundle  js              tests             P S  I faced the same situation in a couple of projects so thought sharing it might help someone   Edit  As per comment by  beltrone the file might also exist in      node modules metro src blacklist js

User · Answer

Fix it by install metro-config of the latest version  0 57 0 for now  they had fixed the problem   npm install metro-config  you can remove it later  after react-native guys update module versions

User · Answer

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

User · Answer

The use of yarn prevents this situation  Yarn should use

User · Answer

https   github com facebook metro issues 453  for who still get this error without official patch in react-native   expo  use yarn and add this setting into package json             resolutions          metro-config    bluelovers metro-config-hotfix-0 56 x

User · Answer

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

User · Answer

The solution is simple  but temporary     Note that if you run an npm install or a yarn install you need to change the code again   So  how can we run this automatically   Permanent Solution  To do this  automagically  after installing your node modules  you can use patch-package    Fix the metro-config file  solving the error    The file appears in  node modules metro-config src defaults blacklist js   Edit from   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              Then  generate a permanent patch file     npx patch-package metro-config   In your package json trigger the patch     scripts         postinstall    npx patch-package      All done  Now this patch will be made at every npm install   yarn install   Thanks to https   github com ds300 patch-package

User · Answer

I had the same problem I altered the E  NodeJS ReactNativeApp ExpoTest node modules metro-config src defaults blacklist js in my project  from   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 worked perfectly for me

User · Answer

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

User · Answer

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

User · Answer

This is caused by node v12 11 0 due to the way it deals regular location there two ways to solve this problem   Method I  You can downgrade to node v12 10 0 this will apply the correct way to deal with parsing error   Method II  You can correctly  terminate the regular expression in you case by changing the file located a    node modules metro-config src defaults blacklist js  From   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

User · Answer

I found the regexp source changed from node v12 11 0  maybe the new v8 engine caused  see more on https   github com nodejs node releases tag v12 11 0   D  code react-native gt nvm use 12 10 0 Now using node v12 10 0  64-bit   D  code react-native gt node Welcome to Node js v12 10 0  Type   help  for more information   gt   node modules     react     dist         source  node modules         react         dist              gt   node modules     react     dist         source replace     g  path sep   node modules          react          dist               gt   To exit  press  C again or  D or type  exit   gt   D  code react-native gt nvm use 12 11 0 Now using node v12 11 0  64-bit   D  code react-native gt node Welcome to Node js v12 11 0  Type   help  for more information   gt   node modules     react     dist         source  node modules       react       dist            gt   node modules     react     dist         source replace     g  path sep   node modules        react        dist             gt   To exit  press  C again or  D or type  exit   gt   D  code react-native gt nvm use 12 13 0 Now using node v12 13 0  64-bit   D  code react-native gt node Welcome to Node js v12 13 0  Type   help  for more information   gt   node modules     react     dist         source  node modules       react       dist            gt   node modules     react     dist         source replace     g  path sep   node modules        react        dist             gt   To exit  press  C again or  D or type  exit   gt   D  code react-native gt nvm use 13 3 0 Now using node v13 3 0  64-bit   D  code react-native gt node Welcome to Node js v13 3 0  Type   help  for more information   gt   node modules     react     dist         source  node modules       react       dist            gt   node modules     react     dist         source replace     g  path sep   node modules        react        dist             gt

User · Answer

You can go to      node modules metro-config src defaults blacklist js and change     var sharedBlacklist        node modules     react     dist             website  node modules          heapCapture  bundle  js            tests             for this   var sharedBlacklist        node modules      react      dist              website  node modules          heapCapture  bundle  js            tests

User · Answer

On windows 10 i highly recommend to install Linux Bash Shell   Here is a nice guide to set it up  https   www howtogeek com 249966 how-to-install-and-use-the-linux-bash-shell-on-windows-10   just follow the steps  choose your linux distribution and avoid as much possible to work with node on cmd since obvious instability   Take in consideration Microsoft strongly warns against adding or modifying Linux files with Windows software  as described here  howtogeek com 261383 how-to-access-your-ubuntu-bash-files-in-windows-and-your-windows-system-drive-in-bash   Hope it helps

User · Answer

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

User · Answer

I got same problem   quot error Invalid regular expression      fixtures   node modules   react   dist     website node modules   heapCapture bundle js   tests       Unterminated character class  quot  Change the regular expression in  node modules metro-config src defaults blacklist js From 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 change resolved my error

User · Answer

All mentioned comments above are great  sharing the path that worked with me for this Blacklist file that need to be edited      quot Your project name node modules metro-bundler src quot  File name  quot blacklist js quot

User · Answer

It is due to mismatched blacklist file configuration  To resolve that   We have to move to the project folder   Open  node modules metro-config src defaults blacklist js  Replace the following    From 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

User · Answer

I have just update package json to change from   react-native    https   github com expo react-native archive sdk-35 0 0 tar gz    to   react-native    https   github com expo react-native archive sdk-36 0 0 tar gz    It seems that the problem won t occur in sdk-36     My node version is v12 16 0 and os is win10

[reactjs] How to resolve the error on 'react-native start'

Examples related to reactjs

Examples related to react-native

Examples related to react-native-android

Examples related to react-native-cli

Examples related to metro-bundler