Monorepo升级Expo SDK 50后出现Babel Flow语法兼容问题

问题根源 #

升级Expo SDK50后，React前端通过react-native-web引入共享UI包时，触发了@react-native/assets-registry包内Flow语法未被Babel处理的错误。这是因为Babel默认不会转译node_modules目录下的文件，但该包包含未预编译的Flow类型定义，而你的Babel配置没覆盖到这个包。

具体解决步骤 #

• 安装必要依赖（未安装则执行）
  安装Flow相关Babel插件：

  npm install --save-dev @babel/preset-flow
  # 若只想解析不转译Flow语法，可替换为：npm install --save-dev @babel/plugin-syntax-flow
  

• 修改React前端的babel.config.js
  调整配置，确保覆盖目标包并启用Flow支持：

  const path = require('path');
  
  module.exports = {
    presets: [
      // 保留你原有的presets（如react-app、@babel/preset-env等）
      '@babel/preset-flow'
    ],
    // 若选择用plugin-syntax-flow，替换presets里的flow为以下配置
    // plugins: [
    //   '@babel/plugin-syntax-flow'
    // ],
    include: [
      // 明确指定要转译的@react-native包
      /@react-native\/assets-registry/,
      // 你的共享UI包路径，确保Babel能处理它
      path.resolve(__dirname, '../packages/ui'),
      // 若其他@react-native开头的包也有问题，可统一匹配：/@react-native\//
    ],
    exclude: [
      // 保留原有exclude规则，但不要包含上面的include路径
    ]
  };
  

• 校验react-native-web版本兼容性
  Expo SDK50对应的react-native-web版本为~0.19.6，检查package.json确保版本匹配，不匹配则调整：

  npm install react-native-web@~0.19.6
  

• 清理缓存并重新构建

  # 删除依赖和锁文件
  rm -rf node_modules package-lock.json
  # 重新安装依赖
  npm install
  # 带缓存清理重启开发服务器
  npm start -- --clear-cache
  

• 检查Monorepo工作区配置
  确认React前端的package.json正确关联了共享UI包，且项目根目录的workspaces配置没有阻止包的正常解析。

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