React Native构建失败：开发服务器500错误及打包失败求助

看你遇到的这个问题，是Metro打包器在代码转换环节出了未捕获的错误，我整理了几个实战中管用的解决方案，不妨按顺序试试：

1. 彻底清理缓存，从头开始 #

Metro的缓存经常会搞出这类莫名其妙的打包故障，先把缓存清干净：

• 先关掉当前运行的开发服务器
• 执行命令重置Metro缓存：

  npx react-native start --reset-cache
  

• 如果是Android项目，顺便清一下Android的构建缓存：

  cd android && ./gradlew clean && cd ..
  

• 之后重新启动开发服务器和项目

2. 核对依赖版本兼容性 #

metro-bundler和React Native版本不匹配是常见的坑：

• 打开你的package.json，看看react-native和metro相关依赖的版本是否对应，建议参照React Native官方的版本适配表调整。
• 如果版本不对，升级或降级对应的依赖，然后重新执行npm install或者yarn install

3. 排查代码里的“捣蛋鬼” #

错误提示是转换线程出问题，大概率是代码（或者某个第三方库）有语法问题，或者Babel搞不定的语法：

• 回忆下最近改了哪些代码，新增了什么组件或依赖，先排查这些部分，看看有没有语法错误，或者用了Babel没配置的ES6+特性。
• 可以试试临时注释掉部分代码，逐步定位是哪块代码导致打包失败。
• 检查下项目根目录的.babelrc或babel.config.js，确保需要的Babel插件都装了且配置正确，比如处理类属性的插件之类的。

4. 重装所有依赖，避免残缺安装 #

有时候依赖安装不全也会引发这类问题：

• 删除node_modules文件夹：

  rm -rf node_modules
  

• 删掉package-lock.json（用npm的话）或者yarn.lock（用yarn的话）
• 重新安装依赖：

  npm install # 或者 yarn install
  

• 再试试打包运行

5. 检查文件权限是否足够 #

错误路径指向你的node_modules目录，可能存在权限不足的情况：

• 给node_modules及其子文件设置足够的读写权限：

  sudo chmod -R 755 /home/manish/donut/node_modules
  

• 注意别用root用户跑npm/yarn，容易搞乱权限

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