如何解决“反应本机启动”上的错误

Question

1. 我刚刚安装了node.js和cli

   • 安装的node.js

   • 安装了react-native-cli

     npm -g react-native-cli
     

2. 并创建了一个“新项目”。

   react-native init new_project
   

3. 在“ new_project”目录中，我很疲倦地查看Metro bundler是否运行良好。

   react-native start
   

4. 但是该命令给了我以下错误，并且Metro无法启动。有任何解决此错误的线索吗？（我正在使用Windows 10 OS。）

   • 命令： C:\projects\new_proj>react-native start

     错误无效的正则表达式：/(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests。)$/：未终止的字符类。使用--verbose标志运行CLI以获取更多详细信息。SyntaxError：无效的正则表达式：/(..fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/：新RegExp（ ）在getBlacklistRE（D：\ projects \ new_proj \ node_modules \ react-native \ node_modules @ react-native）的黑名单（D：\ projects \ new_proj \ node_modules \ metro-config \ src \ defaults \ blacklist.js：34：10） getDefaultConfig上的-community \ cli \ build \ tools \ loadMetroConfig.js：69：59）（D：\ projects \ new_proj \ node_modules \ react-native \ node_modules @ react-native-community \ cli \ build \ tools \ loadMetroConfig.js ：85：20）在负载（D：

Answer 1

我今天才第一次遇到类似的错误。它出现在中\node_modules\metro-config\src\defaults\blacklist.js，其中有一个需要更改的无效正则表达式。我更改了以下的第一个表达式sharedBlacklist：

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

至：

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

Answer 2

这是由节点v12.11.0引起的，原因是它处理常规位置的方式有两种方法可以解决此问题

方法一

您可以降级到节点v12.10.0，这将应用正确的方法来处理解析错误

方法二

您可以通过更改以下位置的文件来正确终止正则表达式：

\node_modules\metro-config\src\defaults\blacklist.js

从：

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

至：

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

Answer 3

您有两种解决方案：

您可以将节点降级到 V12.10.0，也可以为您将创建的每个项目修改此文件。

node_modules/metro-config/src/defaults/blacklist.js 改成 这样：

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

对此：

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

Answer 4

这是由于黑名单文件配置不匹配。

为了解决这个问题，

1. 我们必须移动到项目文件夹。

2. 打开 \node_modules\metro-config\src\defaults\blacklist.js

3. 替换以下内容。

从

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

到

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

Answer 5

我的项目中没有 Metro-config，现在怎么办？

我发现在相当老的项目中没有metro-configin node_modules. 如果你是这种情况，那么，

转到 node_modules/metro-bundler/src/blacklist.js

并执行其他答案中提到的相同步骤，即

代替

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

和

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

PS 我在几个项目中遇到了同样的情况，所以认为分享它可能会对某人有所帮助。

编辑

根据@beltrone 的评论，该文件也可能存在于，

node_modules\metro\src\blacklist.js

Answer 6

我遇到了同样的问题。

"错误无效的正则表达式：/(. \ fixtures \. |node_modules[\]react[\]dist[\]. |website\node_modules\. |heapCapture\bundle.js|. \ tests \. )$/：未终止字符类。”

改变正则表达式 \node_modules\metro-config\src\defaults\blacklist.js

从

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

到

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

此更改解决了我的错误。

Answer 7

带有修复的PR已合并到Metro存储库中。现在我们只需要等到下一个版本。目前最好的选择是降级到 NodeJS v12.10.0。正如Brandon指出的那样，修改任何东西都是node_modules/非常糟糕的做法，不会是最终的解决方案。

Answer 8

https://github.com/facebook/metro/issues/453

对于那些在react-native、expo没有官方补丁的情况下仍然遇到此错误的人

使用yarn并将此设置添加到package.json中

{
  ...
  "resolutions": {
    "metro-config": "bluelovers/metro-config-hotfix-0.56.x"
  },
 ...

Answer 9

解决方案很简单，但暂时...

请注意，如果您运行 annpm install或 a 则yarn install需要再次更改代码！

那么，我们如何自动运行它呢？

永久解决方案

要在安装节点模块后“自动”执行此操作，您可以使用patch-package.

1. 修复metro-config文件，解决错误：

该文件出现在\node_modules\metro-config\src\defaults\blacklist.js.

编辑自：

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

到：

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

2. 然后，生成一个永久补丁文件：

npx patch-package metro-config

3. 在您的package.json触发器中，补丁：

"scripts": {
+  "postinstall": "npx patch-package"
}

全部完成！现在这个补丁将在每个npm install/ 处制作yarn install。

感谢https://github.com/ds300/patch-package

Answer 10

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

Answer 11

使用某些NPM和Node版本的Metro出现问题。

您可以解决更改文件中某些代码的问题\node_modules\metro-config\src\defaults\blacklist.js。

搜索此变量：

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

并更改为：

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

请注意，如果您运行npm安装或yarn安装，则需要再次更改代码。