React Native中ActivityIndicator出现const声明缺失初始化器语法错误求助

错误场景 #

构建项目时触发如下语法错误，涉及ActivityIndicator组件：

SyntaxError: D:\Reacting\node_modules\react-native\Libraries\Components\ActivityIndicator\ActivityIndicator.js: Missing initializer in const declaration.

错误代码片段：

154 | */
  155 |
> 156 | const ActivityIndicatorWithRef: component(
      |                                          ^ 
  157 |   ref: React.RefSetter<HostComponent<empty>>,
  158 |   ...props: Props
  159 | ) = React.forwardRef(ActivityIndicator);

注：项目未使用TypeScript，但React Native内部代码的TS语法未被正确转译

已尝试操作 #

• 确认babel.config.js配置为：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
  };
  

• 执行npx react-native start --reset-cache重置Metro缓存
• 删除node_modules和package-lock.json后重新执行npm install
• 尝试降级React Native至0.71.11

当前项目依赖 #

{
 "name": "CtoB",
 "version": "0.0.1",
 "private": true,
 "dependencies": {
   "react-native": "^0.77.0",
   "react": "18.3.1",
   "axios": "^1.7.9"
 },
 "devDependencies": {
   "@babel/core": "^7.26.0",
   "babel-preset-react-native": "^4.0.1"
 }
}

问题解答 #

1. ActivityIndicator错误解决方案 #

• 移除冲突依赖：卸载冗余的babel-preset-react-native，React Native 0.60+已内置对应转译能力，该依赖会与官方预设冲突：

  npm uninstall babel-preset-react-native
  

• 彻底清理缓存并重建：

  npx react-native clean
  npx react-native start --reset-cache
  npx react-native run-android # 或 run-ios
  

• 升级React Native至修复版本：0.77.0存在TS语法转译bug，升级至0.77.1即可解决：

  npm install react-native@0.77.1 --save-exact
  

2. 版本与Babel配置问题分析 #

• 版本问题：React Native 0.77.0内部存在TS语法转译兼容问题，0.77.1已修复该bug；降级至0.71.x有效是因为旧版本未使用这类TS语法。
• Babel配置问题：你的babel.config.js预设是正确的，但额外安装的babel-preset-react-native是核心冲突点——它会覆盖官方预设的转译规则，导致内部TS语法无法被处理。

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