Windows10下执行npm start启动React Native项目报错求助

问题背景 #

我创建了一个React Native项目，执行npm start启动项目时遭遇了正则表达式相关的错误，完整错误日志如下：

@ start E:\React\amazingApp
expo start
Starting project at E:\React\amazingApp
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
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.
Metro Bundler process exited with code 1
Set EXPO_DEBUG=true in your env to view the stack trace.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ start: expo start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Faizan\AppData\Roaming\npm-cache_logs\2019-12-09T13_43_50_634Z-debug.log

我的项目package.json配置如下：

{
  "main":"node_modules/expo/AppEntry.js",
  "scripts":{
    "start":"expo start",
    "android":"expo start --android",
    "ios":"expo start --ios",
    "web":"expo start --web",
    "eject":"expo eject"
  },
  "dependencies":{
    "expo":"^35.0.0",
    "react":"16.8.3",
    "react-dom":"16.8.3",
    "react-native":"github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-web":"^0.11.7"
  },
  "devDependencies":{
    "babel-preset-expo":"^7.1.0"
  },
  "private":true
}

问题原因 #

这个错误的核心是Node.js版本与你使用的Expo SDK 35不兼容。Node.js 12及以上版本对正则表达式的语法校验变得更严格，而Expo SDK 35依赖的Metro Bundler版本中，有一段正则表达式的写法在高版本Node.js下会被判定为“未终止字符类”，从而导致启动失败。

解决方案 #

这里给你三种可行的解决方式，你可以根据自己的情况选择：

1. 降级Node.js到兼容版本 #

Expo SDK 35官方推荐的Node.js版本是10.x LTS（比如10.19.0），这个版本完全不会有正则校验的问题。如果你用nvm（Node版本管理器）的话，操作起来非常简单：

• 先安装对应版本：nvm install 10.19.0
• 切换到该版本：nvm use 10.19.0
• 之后重新执行npm start就能正常启动了

2. 手动修复Metro的正则配置 #

如果你不想降级Node.js，可以直接修改Metro的配置来修复这个正则问题：

• 在项目根目录创建metro.config.js文件（如果没有的话）
• 把下面的代码复制进去：

const blacklist = require('metro-config/src/defaults/blacklist');
module.exports = {
  resolver: {
    blacklistRE: blacklist([
      /(.*__fixtures__.*|node_modules[\/\\]react[\/\\]dist[\/\\].*|website\/node_modules\/.*|heapCapture\/bundle\.js|.*__tests__.*)$/
    ])
  },
};

这里把原有的[\\\]替换成了标准的[\/\\]，修复了未终止字符类的问题，保存后重新启动项目即可。

3. 升级Expo SDK到新版本 #

如果你的项目允许升级，建议直接升级到Expo SDK 36及以上版本——这些版本已经修复了和高版本Node.js的兼容性问题。执行下面的命令就能一键升级：

expo upgrade

⚠️ 注意：升级前最好备份一下项目，避免出现依赖冲突的情况。

验证方式 #

不管你选哪种方法，修改后执行npm start，如果能正常弹出Expo DevTools并且没有报错，就说明问题已经解决啦！

内容的提问来源于stack exchange，提问作者Faizan Butt