Fix React Native start error: Invalid regular expression 🐛

Typically, you meet this problem when you use React Native with a version lower than 0.60.0.

Why 🤔 !

It's caused by the opposition between the regexp used in the metro configuration and the parser of Node.js versions which won't tolerate it anymore.

Solution 🚀

To solve this problem you have 2 alternatives; the 1st solution is to downgrade the Node.js version (v12.10.0 is the latest version that works) which will apply the correct way to deal with parsing error (not recommended because the security vulnerability).

The 2nd solution is by override the regexp used by metro-config (recommended);

1- We have to move to the project folder.
2- Open ./node_modules/metro-config/src/defaults/blacklist.js
3- Replace the following;

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

Note ⚠️: Each time you run npm/yarn install you will have to change it again because the problem is back again and again ...

Therefore, I came with two solutions that aim to save time in going to the file and changing it every time.

• Solution 1:

Create a script to automate the task and run it every time after installation.

1- Install replace-in-file module:

# npm
npm i replace-in-file
# yarn
yarn add replace-in-file

2- Create a file at the same level as node_modules folder name it fix-metro-config.js (you can use any name you want).

3- Copy this script inside the fix-metro-config.js file:

// load the module.
const replaceInFile = require('replace-in-file')
// path for metro config file.
const METRO_CONFIG_PATH =
  "./node_modules/metro-config/src/defaults/blacklist.js"
// options for editing the file.
const options = [
  { from: "modules[/", to: "modules[\\/" },
  { from: "react[/", to: "react[\\/" },
  { from: "dist[/", to: "dist[\\/" }
]

try {
  // looping on each option
  options.forEach((option, index) => {
    // append the files key for each option.
    const [{ hasChanged }] = replaceInFile.sync({
      ...option,
      files: METRO_CONFIG_PATH
    })
    // logger.
    console.log(
      `The iteration number ${index + 1} handled with status ${hasChanged}`
    )
  })
} catch (error) {
  // logger.
  console.error("Error occurred:", error)
}

4- Go to package.json then add this line:

{
  ... // other keys.
  "scripts": {
    ... // other keys.
    "postinstall": "node fix-metro-config.js", // add this line.
    ... // other keys.
  }
  ... // other keys.
}

• Solution 2:

Use patch-package to handle it automatically after installing your node modules and fix the metro-config for the first time.

1- Generate a permanent patch file:

npx patch-package metro-config

2- Go to package.json then add this line:

{
  ... // other keys.
  "scripts": {
    ... // other keys.
    "postinstall": "npx patch-package", // add this line.
    ... // other keys.
  }
  ... // other keys.
}

I'd love to hear about other solutions ? ✨
Feel free to share it with us 👋