React Native中Yarn Workspaces配置Babel：babelrcRoots报错问题

你的问题本质是React Native 依赖的 Metro bundler 对多包项目（Yarn Workspaces）的 Babel 配置逻辑存在限制，并非你的操作有误。

报错原因拆解 #

babelrcRoots 确实要求只能在根级的 babel.config.js（或程序化配置）中声明，但 Metro 在处理 React Native 项目时，其内部的 Babel 配置加载流程和标准 Babel 环境不同——它会默认按单包项目的逻辑解析配置，导致根目录的 babel.config.js 被误判为「被 extends 的配置文件」，触发 Babel 的规则校验报错。这个问题是 Metro 对多包结构适配不完善的遗留问题，和你找到的旧 issue 描述的情况一致。

可行的临时解决方案 #

由于官方目前还没有提供原生支持，你可以通过以下几种方式绕过这个限制：

1. 合并子包配置到根目录
   删掉子包的 .babelrc.json，在根目录的 babel.config.js 中用 overrides 字段针对不同子包路径配置专属规则：

   module.exports = {
     overrides: [
       {
         test: "./packages/package-a", // 子包A的路径
         presets: ["module:metro-react-native-babel-preset"],
         plugins: ["@babel/plugin-proposal-class-properties"]
       },
       {
         test: "./packages/package-b", // 子包B的路径
         presets: ["module:metro-react-native-babel-preset"],
         plugins: ["@babel/plugin-transform-runtime"]
       }
     ]
   };
   

2. 自定义 Metro Babel 转换器
   修改 metro.config.js，指定自定义转换器来强制传递 babelrcRoots 配置：

   • 首先创建 custom-babel-transformer.js 文件：

     const upstreamTransformer = require('metro-react-native-babel-transformer');
     const babelConfig = require('./babel.config.js');
     
     // 明确设置允许的babelrc根目录
     babelConfig.babelrcRoots = ['.', './packages/*'];
     
     module.exports = {
       ...upstreamTransformer,
       transform({ src, filename, options }) {
         return upstreamTransformer.transform({
           src,
           filename,
           options: {
             ...options,
             babelrcRoots: babelConfig.babelrcRoots,
           },
         });
       },
     };
     

   • 然后修改 metro.config.js：

     const { getDefaultConfig } = require('@react-native/metro-config');
     const config = getDefaultConfig(__dirname);
     
     config.transformer.babelTransformerPath = require.resolve('./custom-babel-transformer.js');
     
     module.exports = config;
     

3. 统一使用根级配置
   暂时移除所有子包的 .babelrc.json，将所有 Babel 规则集中到根目录的 babel.config.js，通过路径判断或环境变量来区分不同子包的编译需求。

后续建议 #

目前 React Native 官方尚未完全解决多包项目的 Babel 配置适配问题，你可以持续关注 Metro 的版本更新，等待官方提供原生支持的方案。

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