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

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. 但是该命令给了我以下错误并且地铁没有启动。 修复此错误的任何线索？ （我使用的是 Windows 10 操作系统。）

   • 命令：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.)$/: 未终止的字符类 在新的正则表达式 () 在黑名单 (D:\projects\new_proj\node_modules\metro-config\src\defaults\blacklist.js:34:10) 在 getBlacklistRE (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:69:59) 在 getDefaultConfig (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:85:20) 加载时（D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:121:25） 在 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) 在 Command.handleAction (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\cliEntry.js:160:21) 在 Command.listener (D:\projects\new_proj\node_modules\commander\index.js:315:8) 在 Command.emit (events.js:210:5) 在 Command.parseArgs (D:\projects\new_proj\node_modules\commander\index.js:651:12)

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

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

谢谢！

Answer 4

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

Answer 5

你可以去...

\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 6

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

这对我很有效

Answer 7

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

npm install metro-config

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

Answer 8

[快速解答]

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 您需要再次更改代码。

Answer 9

前往

\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，因为他们正在修复节点问题。

Answer 10

我发现 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[\\\\\\].*'
>

Answer 11

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

Answer 12

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

对于那些在 react-native 没有官方补丁的情况下仍然得到这个错误的人，expo

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

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

Answer 13

您有两种解决方案：

您可以将节点降级到 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 14

我强烈建议在 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/

希望对你有帮助！

Answer 15

我刚刚更新了 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。

Answer 16

我的项目中没有 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__\/.*/
];

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

编辑

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

node_modules\metro\src\blacklist.js

Answer 17

解决方案很简单，但只是暂时的……

请注意，如果您运行npm install 或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__\/.*/
];

1. 然后，生成永久补丁文件：

npx patch-package metro-config

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

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

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

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

Answer 18

我遇到了同样的问题。

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

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

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

Answer 20

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

要解决这个问题，

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 21

今天我正好遇到了这个问题，但以上这些答案都不适用于我，因为本地更改/修补 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 可以正常工作了。

Answer 22

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

Answer 23

好吧，这是我的解决方案

运行：npm update --filter

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

下一个

运行：npm start // expo start