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

117

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

    • 安装的node.js

    • 安装了react-native-cli

      npm -g react-native-cli

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

    react-native init new_project

  3. 在“ new_project”目录中，我很累，看看地铁捆绑器是否工作良好。

    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：

reactjs  react-native  react-native-android  react-native-cli  metro-bundler 
— 宋凯文
source
就像他们说的那样。Run CLI with --verbose flag for more details.也许您忘了反斜杠。参见stackoverflow.com/questions/14639339/…。没有更多细节不能说。
— rhand
万一在您的node_modules中不存在Metro-config，请在下面检查我的答案。
— gprathour

Answers:

248

我今天才第一次遇到类似的错误。它出现在中\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__\/.*/
];
— 克莱姆
source
1
非常感谢你！我已经按照您说的进行了更改，现在可以使用。我是否必须在每个项目上都对此进行修改，或者是否有一种全局应用此方法的方法？
— 宋凯文-
10
从Github的查询中得到了其他答案。-“这是由节点v12.11.0引起的，降级到v12.10.0即可解决。” 是Leo.Lei。而且我还需要查看它是否有效。
— 宋凯文-
3
极好的修复！非常感谢。从损坏的npm缓存到PERM错误，React Native似乎像是越野车。我花了两天才安装。
— EdNdee
4
/node_modules[\/\]react[\/\]dist[\/\].*/，仅此行需要更改
— vivek
1
非常感谢！它节省了我很多时间。我刚刚在今晚将Node.js从v8.xx升级到v12.13.0，然后突然出现此错误，导致应用启动失败...没有这篇文章，我不知道是由此错误引起的...
— garykwwong19年
106

这是由节点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__\/.*/
];
— 查尔斯
source
2
这超级有帮助，你们不能提交拉取请求吗？到metro-config或expo-cli？
— its4zahoor
1
在10月提交了一个拉取请求：github.com/facebook/metro/commit/…–
— schellack
20

[快速回答]

使用某些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安装，则需要再次更改代码。

— 哈维尔C.
source
开发人员无法解决此问题吗？每次我来这里。感谢爵士
— Hasan Basri，
1
是的，地铁开发商可以通过进行这些更改来解决此问题。
— 哈维尔C.19年
2
谢谢！这样解决了！
— 罗伯特
我认为这不是很好的解决方案。修改node_modules内部的文件
— CodeMind，
1
请注意，如果您使用的是旧版本的react-native（例如0.51.0），则要更改的文件位于：.\node_modules\metro-bundler\src\blacklist.js
— Venryx
20

您有两种解决方案：

您可以将节点降级到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__\/.*/
];
— 哈桑·扎兰（Hasan Zahran）
source
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__\/.*/
];

这对我来说很完美

— 内拉哈拉内拉哈拉
source
5

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

— 何塞·里昂
source
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

— 时光
source
1
确实有帮助，但是我的360 init中的文件位于MyProject\node_modules\metro\src\blacklist.js。干杯。
— Beltrone
4

我有同样的问题。

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

此更改解决了我的错误。

— 密山·马杜帕
source
3

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

对于谁仍然在react-native，expo中没有官方补丁的情况下仍然收到此错误

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

{
  ...
  "resolutions": {
    "metro-config": "bluelovers/metro-config-hotfix-0.56.x"
  },
 ...
— 情人
source
2

去

\ 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，因为它们已解决了节点问题。

— Lahiru Amarathunge
source
1

你可以去...

\ 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__\/.*/
];
— 莱昂内尔·韦利兹·阿蓬特
source
0

通常，我不修改其中的文件node_modules/（或任何未提交为存储库一部分的文件），因为下一次清理，构建或更新将使它们退化。我过去肯定是这样做的，这使我难过几次。但这确实是一个短期/本地开发修复，直到/除非 metro-config更新。

谢谢！

— 布兰登·高斯曼
source
0

我发现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[\\\\\\].*'
>
— 刘东华
source
0

通过安装最新版本（目前为0.57.0）的metro-config进行修复，他们已解决了该问题：

npm安装Metro-config

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

— 肯勃
source
那对我没有帮助。
— Velizar Andreev Kitanov
0

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

— 古卡
source
0

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

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

只需按照以下步骤操作，选择Linux发行版，并避免在cmd上使用节点，因为明显的不稳定。

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

希望能帮助到你！

— 阿瓦塔乔
source
0

我刚刚更新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中发生！

我的节点版本是v12.16.0，操作系统是win10。

— 安森
source
0

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

请注意，如果您运行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

— 梅孔·梅斯基塔（Maycon Mesquita）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.