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

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

    • 安装了 node.js

    • 安装的反应-本地-氯离子

      npm -g react-native-cli

  2. And created a 'new project'.

    react-native init new_project

  3. and inside that 'new_project' directory, I tired to see if metro bundler works well.

    react-native start

  4. But the command gave me following error and metro is not starting. Any clue for fixing this error? (I'm using windows 10 OS.)

    • command : C:\projects\new_proj>react-native start

      error Invalid regular expression: /(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/: Unterminated character class. Run CLI with --verbose flag for more details. SyntaxError: Invalid regular expression: /(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/: Unterminated character class at new RegExp () at blacklist (D:\projects\new_proj\node_modules\metro-config\src\defaults\blacklist.js:34:10) at getBlacklistRE (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:69:59) at getDefaultConfig (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:85:20) at load (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:121:25) at 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) at Command.handleAction (D:\projects\new_proj\node_modules\react-native\node_modules@react-native-community\cli\build\cliEntry.js:160:21) at Command.listener (D:\projects\new_proj\node_modules\commander\index.js:315:8) at Command.emit (events.js:210:5) at Command.parseArgs (D:\projects\new_proj\node_modules\commander\index.js:651:12)

173813 次浏览
小开

我今天第一次遇到了类似的错误。它出现在 \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引起的，因为它处理常规位置的方式有两种解决这个问题的方法

方法 I

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

方法 II

在您的情况下，您可以通过更改位于以下位置的文件来正确终止正则表达式:

\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，否则这将作为一个短期/本地 dev 补丁工作。

谢谢！

小开

带有修复程序的 公关已经合并到 市警存储库中。现在我们只需要等到下一个版本。目前最好的选择是降级到 NodeJSv12.10.0。正如 布兰登指出的那样，修改 node_modules/中的任何内容都是非常糟糕的做法，不会是最终的解决方案。

小开

你可以去..。

Node _ module Metro-config 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__\/.*/
];
小开

我在项目中修改了 E: NodeJS ReactNativeApp ExpoTest node _ module Metro-config 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__\/.*/
];

这对我来说太好了

小开

通过安装最新版本(目前为0.57.0)的 Metro-config 来修复它，他们已经修复了这个问题:

安装 Metro-config

你可以稍后删除它，在反应-本地人更新模块版本

小开

[快速回答]

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

小开

去吧

Node _ module Metro-config 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__\/.*/
];

这不是一个最佳实践，我的建议是: 将节点版本降级到12.9或更新 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[\\\\\\].*'
>
小开

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

对于谁仍然得到这个错误没有官方补丁在反应-本地，世博会

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

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

你有两个解决办法:

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

Node _ module/Metro-config/src/default/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__\/.*/
];
小开

在 Windows10上，我强烈推荐安装 LinuxBashShell。

这里有一个很好的建立它的指南: Https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/

只需按照步骤，选择您的 Linux 发行版，并尽可能避免与 cmd 上的节点工作，因为明显的不稳定性。

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

希望能有帮助！

小开

我刚刚更新了 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，操作系统是 赢10。

小开

我的项目中没有地铁配置，现在怎么办？

我已经发现，在相当老的项目有没有 metro-config在 node_modules。如果你是这样的话,

转到 node _ module/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 _ module Metro src blacklist.js

小开

解决办法很简单，但只是暂时的。

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

小开

我也有同样的问题。

”错误无效的正则表达式:/(. 固定装置。 | node _ module [] response [] dist [] . 网站节点模块。 | heapCapture bundle.js | . 测试。) $/: 未终止的字符类

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

这个改变解决了我的错误。

小开

上面提到的所有评论都很棒，分享了这个黑名单文件需要编辑的路径:

文件名“ blacklist.js”

小开

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

为了解决这个问题,

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

今天我碰到了这个问题，但是上面这些答案都不适用于我，因为局部更改/修补 node _ module 或者仅仅通过纱线处理增加分辨率对我来说永远不会是一个解决方案，无论是短期的还是其他什么。

毫不奇怪，package.json 只需要获得一些更新的依赖版本，所以我点击 cli，切换到 package.json 所在的项目目录，这些行就完成了任务:

  • 安装-g npm-检查-更新
  • 新生儿重症监护病房
  • Npm 安装

第一行全局安装一个工具，该工具只列出 package.json 提供的可升级的所有(dev -) dep。第二个命令自动调整 package.json 中的版本号。最后一行重新安装节点-模块-使用“纱线”而不是“ npm install”也很好。

现在按照预期的方式进行反应。

小开

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

小开

这是我的解决办法

运行: npm update --filter

此命令将更新所有必要的依赖项，以使您的本机应用程序运行

下一个

运行: npm start // expo start


提交答案