How to resolve the error on 'react-native start'

Question

I just installed node.js & 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>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)

Like they stated `Run CLI with --verbose flag for more details.` Perhaps you forgot to escape a backslash. See https://stackoverflow.com/questions/14639339/javascript-unterminated-character-class . Cannot say without more details. — rhand, Sep 28 '19 at 01:08
Just in case metro-config doesn't exist in node_modules for you then check my answer below. — gprathour, May 15 '20 at 23:22

score 384 · Answer 1 · answered Sep 26 '19 at 18:32

384

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

answered Sep 26 '19 at 18:32

Clem

3,849
1
4
2

1

Thank you very much! I made changes as you said and it works now. Do I have to modify this on every project or is there a way to apply this globally? – Song Kevin Sep 26 '19 at 23:40
Thank you much! it worked fine. Could you explain the reason? – akio an Sep 27 '19 at 09:47
This solve my problem too but i understand why this happened, someone know the why? – Lucas Fontes Gaspareto Sep 27 '19 at 11:33
13

Got some other answer from the query on Github. - 'It's caused by node v12.11.0, downgrade to v12.10.0 will solve it.' It was from Leo.Lei. And I also need to see if it works or not. – Song Kevin Sep 29 '19 at 10:11
12

Excellent fix! Thanks a lot. React Native seems like such buggy ride, from corrupt npm cache, to PERM errors. It's taken me two day just to install. – EdNdee Oct 01 '19 at 11:59
6

/node_modules[\/\\]react[\/\\]dist[\/\\].*/, Just this line needs change – vivek Nov 03 '19 at 05:01
2

Thanks a lot! It save me lots of time. I've just upgraded my Node.js from v8.x.x. to v12.13.0 in this night and then this error suddenly which leads to app start failure ... didn't aware it's cause by this bug without this post ... – garykwwong Nov 09 '19 at 16:53
1

I have var sharedBlacklist = [ /node_modules\/react\/dist\/.*/, /website\/node_modules\/.*/, /heapCapture\/bundle\.js/, /.*\/__tests__\/.*/ ]; as this, still its not working. – sanjeev shetty Apr 30 '20 at 11:03
I'm getting an error after performing this: error: unknown option '--assetPlugins' Metro Bundler process exited with code 1 Error: Metro Bundler process exited with code 1 at ChildProcess(/@expo/xdl@57.9.15/src/Project.js:1918:16)..... my jest- expo version is 36.0.1 and my react-native, expo version is 36.0.0 – aspiringsomeone Jun 18 '20 at 22:26
Works more than charm. This is the second project I am bumping into this error, and this is the answer that has helped me twice. – Daggie Blanqx - Douglas Mwangi Aug 27 '21 at 11:53
step 1. node_modules/metro/src/blacklist.js step 2. replace code – Soumitya Chauhan Jul 02 '23 at 07:04

score 145 · Answer 2 · edited Oct 23 '19 at 10:10

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

A pull request was submitted back in October: https://github.com/facebook/metro/commit/7c6f30b592b2fb23cee55b54f1aa4b7a522dec18 — schellack, Dec 18 '19 at 21:50

score 34 · Answer 3 · answered Dec 25 '20 at 13:56

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

score 28 · Answer 4 · edited Jun 20 '20 at 09:12

[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.

Note that if you're using an old version of react-native (eg. 0.51.0), the file to be changed is instead at: `.\node_modules\metro-bundler\src\blacklist.js` — Venryx, May 22 '20 at 11:44

score 25 · Answer 5 · answered Dec 27 '19 at 09:53

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

gprathour · Answer 6 · 2020-05-28T07:09:33.110

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

Did help, but the file in my 360 init is in `MyProject\node_modules\metro\src\blacklist.js`. Cheers. — beltrone, May 27 '20 at 06:01

score 19 · Answer 7 · answered Jul 22 '20 at 05:15

I got same problem.

"error Invalid regular expression: /(.\fixtures\.|node_modules[\]react[\]dist[\].|website\node_modules\.|heapCapture\bundle.js|.\tests\.)$/: Unterminated character class."

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.

Shrikrishna Tambe · Answer 8 · 2019-11-07T08:47:21.647

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

score 6 · Answer 9 · answered Oct 30 '19 at 04:31

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.

Maycon Mesquita · Answer 10 · 2020-05-22T21:00:27.307

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

It is most reasonable answer. Thanks. – ridvanaltun Jul 04 '21 at 18:27 — ridvanaltun, Jul 04 '21 at 18:27

score 5 · Answer 11 · answered Dec 24 '19 at 15:52

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"
  },
 ...

Lahiru Amarathunge · Answer 12 · 2019-12-11T06:54:09.370

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.

score 2 · Answer 13 · edited Dec 08 '19 at 16:37

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

score 2 · Answer 14 · answered Apr 01 '20 at 10:34

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.

score 1 · Answer 15 · answered Nov 28 '21 at 23:50

1

Had the same issue today with a project that was built on an old version of node, I just installed node v12.9.0 and the problem was resolved. I use nvm to easily downgrade node versions.

answered Nov 28 '21 at 23:50

Ahmad Khudeish

1,017
13
15

score 0 · Answer 16 · answered Oct 25 '19 at 12:25

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!

KEMBL · Answer 17 · 2019-12-19T18:52:35.647

0

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

edited Dec 19 '19 at 18:52

answered Nov 07 '19 at 13:24

KEMBL

536
6
10

That doesn't help to me. – Velizar Andreev Kitanov Dec 16 '19 at 13:55

score 0 · Answer 18 · answered Dec 12 '19 at 08:12

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>nvm use 12.10.0
Now using node v12.10.0 (64-bit)

D:\code\react-native>node
Welcome to Node.js v12.10.0.
Type ".help" for more information.
> /node_modules[/\\]react[/\\]dist[/\\].*/.source
'node_modules[\\/\\\\]react[\\/\\\\]dist[\\/\\\\].*'
> /node_modules[/\\]react[/\\]dist[/\\].*/.source.replace(/\//g, path.sep)
'node_modules[\\\\\\\\]react[\\\\\\\\]dist[\\\\\\\\].*'
>
(To exit, press ^C again or ^D or type .exit)
>

D:\code\react-native>nvm use 12.11.0
Now using node v12.11.0 (64-bit)

D:\code\react-native>node
Welcome to Node.js v12.11.0.
Type ".help" for more information.
> /node_modules[/\\]react[/\\]dist[/\\].*/.source
'node_modules[/\\\\]react[/\\\\]dist[/\\\\].*'
> /node_modules[/\\]react[/\\]dist[/\\].*/.source.replace(/\//g, path.sep)
'node_modules[\\\\\\]react[\\\\\\]dist[\\\\\\].*'
>
(To exit, press ^C again or ^D or type .exit)
>

D:\code\react-native>nvm use 12.13.0
Now using node v12.13.0 (64-bit)

D:\code\react-native>node
Welcome to Node.js v12.13.0.
Type ".help" for more information.
> /node_modules[/\\]react[/\\]dist[/\\].*/.source
'node_modules[/\\\\]react[/\\\\]dist[/\\\\].*'
> /node_modules[/\\]react[/\\]dist[/\\].*/.source.replace(/\//g, path.sep)
'node_modules[\\\\\\]react[\\\\\\]dist[\\\\\\].*'
>
(To exit, press ^C again or ^D or type .exit)
>

D:\code\react-native>nvm use 13.3.0
Now using node v13.3.0 (64-bit)

D:\code\react-native>node
Welcome to Node.js v13.3.0.
Type ".help" for more information.
> /node_modules[/\\]react[/\\]dist[/\\].*/.source
'node_modules[/\\\\]react[/\\\\]dist[/\\\\].*'
> /node_modules[/\\]react[/\\]dist[/\\].*/.source.replace(/\//g, path.sep)
'node_modules[\\\\\\]react[\\\\\\]dist[\\\\\\].*'
>

score 0 · Answer 19 · answered Sep 07 '20 at 05:32

0

All mentioned comments above are great, sharing the path that worked with me for this Blacklist file that need to be edited:

"Your project name\node_modules\metro-bundler\src" File name "blacklist.js"

answered Sep 07 '20 at 05:32

HassanSh__3571619

1,859
1
19
18

score 0 · Answer 20 · answered Mar 21 '21 at 04:26

Today I ran into exactly this issue, but none of these answers above were applicable for me as locally changing/patching node_modules or adding resolutions handled by yarn only will never be a solution for me, be it short-term or whatever.

Not surprisingly at all, package.json just needed to get some updated dependency versions, so I hit the cli, changed to the project directory where package.json was located and these lines did the job then:

npm install -g npm-check-updates
ncu -u
npm install

The first line globally installs a tool which simply lists all (dev-)deps provided by package.json which you could upgrade. The second command automagically adapts the version numbers within package.json. The last line reinstalls node-modules - using "yarn" instead of "npm install" is perfectly fine as well.

Now react-native works as expected.

score 0 · Answer 21 · answered Dec 05 '21 at 23:12

0

Well, Here's my solution

run: npm update --filter

This command would update all the necessary dependencies to have your react-native app running

answered Dec 05 '21 at 23:12

Vicheans

65
1
5

score 0 · Answer 22 · answered Jul 02 '23 at 07:03

0

step 1. node_modules/metro/src/blacklist.js step 2. replace code

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

answered Jul 02 '23 at 07:03

Soumitya Chauhan

359
3
6

score 0 · Answer 23 · answered Jul 07 '23 at 20:34

0

Sometimes such issues can occur due to broken dependencies. There, it can be resolved by updating packages.

npx npm-check-updates -u
npm i

answered Jul 07 '23 at 20:34

Rajitha Bandara

743
1
10
16

How to resolve the error on 'react-native start'

23 Answers23

[Quick Answer]

I don't have metro-config in my project, now what?

The solution is simple, but temporary...

Permanent Solution

Linked