React Native升级报错：EventEmitter.js遇Unexpected Token语法错误

问题背景 #

升级React Native项目至新版本的操作步骤：

• 使用最新版本创建新的React Native项目
• 安装旧项目中所有依赖包测试兼容性，新项目未出现崩溃
• 将旧项目实际代码导入新文件夹

运行项目时，node_modules目录下出现如下语法错误：

ERROR  SyntaxError: [ROOT_FOLDER]/node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js: 
Unexpected token, expected "]" (39:5)

  37 |
  38 | type Registry<TEventToArgsMap: {...}> = {
> 39 |   [K in keyof TEventToArgsMap]: Set<Registration<TEventToArgsMap[K]>>,
     |      ^
  40 | };
  41 |
  42 | /**

已尝试的解决操作：

• 清理项目缓存
• 重新安装所有依赖包
• 通过Android Studio编译Android项目

可行解决方案 #

1. 修复Babel配置以支持TypeScript语法 #

该错误源于Babel无法解析TypeScript的映射类型语法（[K in keyof TEventToArgsMap]），需确保Babel配置适配新版本React Native的语法要求：

• 安装@babel/preset-typescript依赖：

  npm install @babel/preset-typescript --save-dev
  # 或使用yarn
  yarn add @babel/preset-typescript --dev
  

• 在babel.config.json中添加该预设：

  {
    "presets": ["module:metro-react-native-babel-preset", "@babel/preset-typescript"]
  }
  

• 检查metro.config.js，确保未排除react-native相关文件的转译处理。

2. 排查依赖版本冲突 #

旧项目的部分依赖可能强制锁定了Babel或TypeScript的低版本，导致无法兼容新版本React Native的语法：

• 执行npm ls @babel/core或yarn list @babel/core查看依赖树，定位是否有低版本Babel被强制引入。
• 根据React Native官方兼容性矩阵，更新所有依赖至适配当前RN版本的最新兼容版。

3. 调整TypeScript配置 #

确保tsconfig.json的配置支持新版TypeScript语法：

{
  "compilerOptions": {
    "target": "ES6",
    "jsx": "react-native",
    "strict": true,
    "esModuleInterop": true
  }
}

4. 彻底清理Metro缓存 #

执行更彻底的缓存重置命令，避免缓存残留导致的语法解析问题：

npx react-native start --reset-cache

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