升级React Native依赖后启动Expo Dev Client报错：找不到指定Babel插件

我在package.json里更新了以下依赖版本：

react-native-gesture-handler  ~2.10.2 -> ~2.12.0
react-native-get-random-values  ~1.8.0 -> ~1.9.0 
react-native-reanimated  ~3.1.0 -> ~3.3.0
react-native-screens  ~3.20.0 -> ~3.21.1

执行命令yarn expo start --dev-client --ios时，弹出错误：

Cannot find module '@babel/plugin-proposal-optional-chaining'

我试过添加相关issue里建议的完整peerDependencies部分，但问题还是没解决。想问下这个错误的原因是什么，该怎么修复？

以下是我的package.json依赖配置：

...
  "dependencies": {
    "@babel/preset-typescript": "^7.22.5",
    "@config-plugins/react-native-ble-plx": "^6.0.0",
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/pro-duotone-svg-icons": "^6.4.0",
    "@fortawesome/pro-light-svg-icons": "^6.4.0",
    "@fortawesome/pro-regular-svg-icons": "^6.4.0",
    "@fortawesome/react-native-fontawesome": "^0.3.0",
    "@fortawesome/sharp-solid-svg-icons": "^6.4.0",
    "@react-native-async-storage/async-storage": "~1.18.2",
    "@react-native-community/netinfo": "9.3.10",
    "@react-native-picker/picker": "2.4.10",
    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
    "@reduxjs/toolkit": "^1.9.5",
    "amazon-cognito-identity-js": "^6.3.0",
    "aws-amplify": "^5.3.0",
    "aws-amplify-react-native": "^7.0.2",
    "expo": "^48.0.19",
    "expo-dev-client": "~2.2.1",
    "expo-file-system": "~15.2.2",
    "expo-sharing": "~11.2.2",
    "expo-splash-screen": "~0.18.2",
    "expo-status-bar": "~1.4.4",
    "expo-updates": "~0.16.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.11",
    "react-native-ble-plx": "^2.0.3",
    "react-native-gesture-handler": "~2.10.2",
    "react-native-get-random-values": "~1.8.0",
    "react-native-logs": "^5.0.1",
    "react-native-reanimated": "~3.1.0",
    "react-native-safe-area-context": "4.5.3",
    "react-native-screens": "~3.20.0",
    "react-native-svg": "13.9.0",
    "react-native-web": "~0.19.5",
    "react-redux": "^8.1.0",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.22.5",
    "@redux-devtools/core": "^3.13.1",
    "@types/jest": "^29.5.2",
    "@types/react": "~18.2.13",
    "@types/react-redux": "^7.1.25",
    "@types/uuid": "^9.0.2",
    "@typescript-eslint/eslint-plugin": "^5.60.0",
    "@typescript-eslint/parser": "^5.60.0",
    "eslint": "^8.43.0",
    "eslint-plugin-jest": "^27.2.2",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "jest": "^29.5.0",
    "jest-expo": "^48.0.2",
    "typescript": "^5.1.3"
  },
  ...

以及babel.config.js配置：

module.exports = function(api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin']
  }
}

错误原因 #

1. 依赖版本不兼容：更新后的react-native-reanimated@3.3.0等依赖可能需要特定版本的Babel插件，但当前babel-preset-expo（对应Expo 48）自带的配置里没包含@babel/plugin-proposal-optional-chaining，或者你用的@babel/core版本太高，和依赖要求不匹配。
2. 缓存或安装残留：更新依赖后，Yarn缓存里可能还留着旧配置，导致插件无法被正确识别。
3. peerDependencies未覆盖：部分依赖可能需要显式安装该Babel插件作为peer依赖，但你之前添加的peerDependencies没覆盖到这个插件。

解决方案 #

1. 直接安装缺失的插件 #

把@babel/plugin-proposal-optional-chaining装到开发依赖里：

yarn add @babel/plugin-proposal-optional-chaining --dev

2. 对齐Babel版本 #

Expo 48推荐的@babel/core版本是^7.20.0，你当前用的^7.22.5可能过高，尝试降级：

yarn add @babel/core@^7.20.0 --dev

3. 清理缓存重装依赖 #

• 清除Yarn缓存：

yarn cache clean

• 删除node_modules和锁文件：

rm -rf node_modules yarn.lock

• 重新安装：

yarn install

4. 修改babel配置 #

如果上面的方法没用，直接在babel.config.js里显式添加该插件：

module.exports = function(api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      '@babel/plugin-proposal-optional-chaining',
      'react-native-reanimated/plugin'
    ]
  }
}

5. 验证版本兼容性 #

检查react-native-reanimated@3.3.0是否兼容Expo 48。如果不兼容，可以回退Reanimated版本，或者把Expo升级到49及以上版本。

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