reactjs - 如何解决“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.)$/: 在新的 RegExp ( ) 在黑名单 (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:

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

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

为了解决这个问题，

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 4

[快速回答]

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 5

你有两个解决方案：

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

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

我发现在相当老的项目中metro-config没有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 7

我遇到了同样的问题。

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

我遇到了同样的问题，我在我的项目中更改了 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 9

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

Answer 10

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

请注意，如果您运行 annpm install或 ayarn 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 11

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

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

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

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

Answer 12

去

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

你可以去...

\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

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.

Answer 15

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

Answer 16

好吧，这是我的解决方案

跑：npm update --filter

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

下一个

跑：npm start // expo start

Answer 17

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

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

Answer 19

在 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，因为明显的不稳定。

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

希望能帮助到你！

Answer 20

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

谢谢！

Answer 21

我发现 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 22

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

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

Answer 23

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

npm 安装地铁配置

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