Question

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

2019-09-26

190557

reactjs react-native react-native-cli metro-bundler

我刚刚安装了 node.js 和 cli
- 安装了 node.js
- 安装了 react-native-cli
```
npm -g react-native-cli
```
并创建了一个“新项目”。
```
react-native init new_project
```
在“new_project”目录中，我尝试查看 metro bundler 是否运行良好。
```
react-native start
```
但命令给了我以下错误，并且 metro 无法启动。有什么线索可以修复此错误吗？（我使用的是 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.)$/：未终止的字符类在 new RegExp () 在 blacklist (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) 在 load (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

这是由 node v12.11.0 处理常规位置的方式引起的，有两种方法可以解决此问题

方法 I

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

Answer 3

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

要解决这个问题，

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