score:0
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!
score: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
score:0
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
The use of yarn prevents this situation. Yarn should use
score:0
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!
score: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"
score:0
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
Well, Here's my solution
run: npm update --filter
This command would update all the necessary dependencies to have your react-native app running
next
run: npm start // expo start
score: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.
score:2
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
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:3
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:5
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"
},
...
score:6
score:6
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
score:11
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:17
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.
score:23
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
score:24
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__\/.*/
];
score:27
[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.
score:33
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:141
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__\/.*/
];
score:368
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__\/.*/
];
Source: stackoverflow.com
Related Query
- React Native start failed with error code -4094 how to solve this ONCE for ALL?
- How to setup sublime 3 with react native so that when you click on the error and it jump to your code?
- How do I resolve the React app error for npm run build "Failed to compile. Failed to minify the bundle."?
- How to resolve the "Invalid hook call" error in react
- How can i resolve the react material ui error
- How to resolve the error Attempted import error: 'react-hook-form' does not contain a default export (imported as 'useForm'). using react js
- How to resolve the validateDOMNesting(...): <form> cannot appear as a descendant of <form> error React JS
- How to validate End date which is less than the Start date in react and add error message in banner if the end date is less than start date in react
- How can I resolve this error " type is invalide" in react native
- How to resolve the error on 'react-native start'
- How do you make the ListHeaderComponent of a React Native FlatList sticky?
- How to Position a React Native Button at the bottom of my screen to work on multiple ios devices
- React tutorial - how do I start the node server for a reactJs application?
- How to resolve "Animated: `useNativeDriver` is not supported because the native animated module is missing." in react-navigation?
- Minified React error #152 - how to resolve this?
- How to close the modal in react native
- How to run socket.io in the background on iOS in a React Native app?
- How to set the height of button in React Native Android
- How should the new context api work with React Native navigator?
- How to resolve "Uncaught TypeError: Failed to construct 'Comment': Please use the 'new' operat....." with respect to React JS?
- how to resolve a react native EventEmitterListener warning
- How to resolve module name conflict in react native
- React Native - How to load local image using the uri in Image Component?
- How to enable the Android monitor in React Native for checking logs?
- How do I access the phone's camera with React Native iOS?
- How to resolve the no-undef error for setTimeout
- How to reuse the React JS component in React Native
- How to fix React Native error "jest-haste-map: Haste module naming collision"?
- How to resolve CORS error in REACT with ASP.NET Core
- react native sudden Unable to resolve module `fs` error
More Query from same tag
- Passing ref into styled components in react
- Maximum update depth exceeded react
- Visual Studio 2015 JSX/ES2015 syntax highlighting
- How to fix automatic typeConversion with useState
- can we pass a value when we move to next component using this.props.history.push("/next Component")?
- react-intl v4 upgrade `IntlProvider` not found preventing component from displaying when using `injectIntl` wrapper
- ReactJS: How do I go the next page after condition is true?
- I get internal server error while running next js app with styled component
- React Router prevent random route
- React router browser back button isn't working
- How to force client redirect to login page with express post request?
- Understanding Redux life cycle, (initial ajax load doesn't work)
- useEffect is not trigggering
- how to make post request with image using axios?
- How to implement Barcode scanner in react js website
- Redux Form Wizard, button to send json field data?
- Type 'undefined' cannot be used as an index type
- Rails API how do I send the active record validation error?
- TypeScript 3: property is missing in type
- It works fine but I need to refresh whole page while switching from home to about and vice-versa. Please, am working on v5.3.0 react-router-dom
- Need Get to element based on consecutive object property or properties from array of object i have a value to search
- OpenSeadragon missing prop in types definition
- Invalid hook call inside React.FC
- Firebase cloud messaging onMessage not triggered in React app even after message is sent
- Container Component cannot find Store
- Child Component not rendered in react js
- Import html string on a different file on react. Using prismjs to display code highlighting
- Testing mobx react observer with react usecontext - React, Mobx
- React component is declared but its value is never read BUT I HAVE "READ" IT
- Unable to understand double arrow function which returns another function