Fix React Native start error: Invalid regular expression 🐛
Tags: reactnative, expo, node, javascript
Published: 2021-04-16 15:55:35


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;

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

With

```javascript
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:

```bash
# 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:

```javascript
// 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:

```json
{
  ... // 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:

```bash
npx patch-package metro-config
```

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

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


### I'd love to hear about other solutions ? ✨ <br /> Feel free to share it with us 👋