Windows10下新建React Native项目运行yarn run android报Babel模块错误

根因说明 #

• Babel依赖版本不兼容：metro-react-native-babel-preset依赖的@babel/plugin-transform-exponentiation-operator所需的@babel/helper-builder-binary-assignment-operator-visitor版本与项目内其他Babel相关依赖版本不匹配，即使本地node_modules中存在该模块，版本不符也会触发模块加载失败。
• 包管理工具缓存异常：yarn的全局缓存损坏，导致依赖安装时部分文件未正确写入到项目目录。
• Windows系统路径长度限制：Windows默认最大文件路径长度为260字符，node_modules嵌套层级较深时会导致系统无法正常读取深层路径下的模块文件。

修复步骤 #

步骤1：清理缓存重装依赖 #

先关闭所有运行中的Metro服务、Android模拟器进程，依次执行以下命令：

# 删除现有依赖目录
rm -rf node_modules
# 删除版本锁定文件
rm package-lock.json yarn.lock
# 清理yarn全局缓存
yarn cache clean
# 重新安装所有依赖
yarn install

若使用Windows PowerShell执行，删除命令替换为：

Remove-Item -Recurse -Force node_modules
Remove-Item package-lock.json,yarn.lock -ErrorAction SilentlyContinue

步骤2：手动对齐Babel依赖版本 #

如果重装依赖后问题仍存在，手动安装对应依赖对齐版本：

yarn add @babel/helper-builder-binary-assignment-operator-visitor @babel/plugin-transform-exponentiation-operator -D

步骤3：解除Windows路径长度限制（可选，针对路径过长问题） #

1. 按下Win+R输入regedit打开注册表编辑器
2. 定位到路径：HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem
3. 找到LongPathsEnabled项，将数值修改为1
4. 重启电脑生效

修复完成后启动项目建议添加重置缓存参数，避免旧缓存影响：yarn run android --reset-cache

内容的提问来源于stack exchange，提问作者Krishna Kumar S