如何解决“react-native start”上的错误

我今天第一次遇到类似的错误。它出现在 \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__\/.*/
];

---

这是由节点 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__\/.*/
];

---

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

为了解决这个问题，

我们必须移动到项目文件夹。打开 \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__\/.*/
];

---

[快速回答]

Metro 使用某些 NPM 和 Node 版本存在问题。

您可以解决更改文件 \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 install 或 yarn install 您需要再次更改代码。

---

你有两个解决方案：

您可以将节点降级到 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__\/.*/
];

---

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

我发现在相当旧的项目中，node_modules 中没有 metro-config。如果是你的情况，那么，

转到 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

---

我遇到了同样的问题。

“错误正则表达式无效：/(.\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__\/.*/
];

此更改解决了我的错误。

---

我遇到了同样的问题，我在我的项目中更改了 E:\NodeJS\ReactNativeApp\ExpoTest\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__\/.*/
];

这对我来说非常有用

---

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

---

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

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

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

永久解决方案

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

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

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

npx patch-package metro-config

在你的 package.json 中触发补丁：

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

全部完成！现在这个补丁将在每个 npm install / yarn install 发布。

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

---

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

对于在 react-native 没有官方补丁的情况下仍然会出现此错误的人，请展示

使用纱线并将此设置添加到 package.json

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

---

去

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

这不是最佳实践，我的建议是：将节点版本降级到 12.9 或更新 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__\/.*/
];

---

我刚刚更新 package.json 以更改

"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz"

至

"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz"

sdk-36好像不会出现这个问题！！

我的node版本是v12.16.0，os是win10。

---

今天在旧版本节点上构建的项目也遇到了同样的问题，我刚刚安装了节点 v12.9.0，问题就解决了。我使用 nvm 轻松降级节点版本。

---

作为一般规则，我不会修改 node_modules/ 中的文件（或任何未作为存储库的一部分提交的文件），因为下一次清理、构建或更新将使它们回归。我过去确实这样做过，它咬了我好几次。但这确实可以作为短期/本地开发修复，直到/除非更新 metro-config。

谢谢！

---

我发现 regexp.source 从 node v12.11.0 更改，可能是新的 v8 引擎造成的。在 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[\\\\\\].*'
>

---

通过安装最新版本（目前为 0.57.0）的 metro-config 来修复它，他们已经解决了这个问题：

npm 安装地铁配置

您可以稍后在 react-native 人员更新模块版本后将其删除

---

使用纱线可以防止这种情况。纱线应该使用

---

在 Windows 10 上，我强烈建议安装 Linux Bash Shell。

这是一个很好的设置指南：https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/

只需按照这些步骤，选择您的 linux 发行版，并尽可能避免在 cmd 上使用 node，因为明显的不稳定。

考虑到 Microsoft 强烈警告不要使用 Windows 软件添加或修改 Linux 文件，如下所述：howtogeek.com/261383/how-to-access-your-ubuntu-bash-files-in-windows-and-your-windows-system-drive-in-bash/

希望能帮助到你！

---

上面提到的所有评论都很棒，分享了与我一起工作的需要编辑的黑名单文件的路径：

“你的项目名\node_modules\metro-bundler\src” 文件名“blacklist.js”

---

今天我正好遇到了这个问题，但是上面的这些答案都不适用于我，因为本地更改/修补 node_modules 或添加仅由 yarn 处理的分辨率对我来说永远不会是一个解决方案，无论是短期的还是其他的。

一点也不奇怪，package.json 只需要获取一些更新的依赖版本，所以我点击 cli，更改为 package.json 所在的项目目录，然后这些行完成了这项工作：

npm install -g npm-check-updates

ncu -u

npm 安装

第一行全局安装了一个工具，它简单地列出了 package.json 提供的所有（dev-）deps，您可以升级它们。第二个命令自动适应 package.json 中的版本号。最后一行重新安装节点模块 - 使用“yarn”而不是“npm install”也很好。

现在 react-native 按预期工作。

---

好吧，这是我的解决方案

运行：npm update --filter

此命令将更新所有必要的依赖项以使您的 react-native 应用程序运行

下一个

运行：npm start // expo start

---