React Native中babel.config.js别名无法识别当前目录外文件

核心原因 #

Metro CLI 拥有独立的模块解析规则，不会直接复用 TypeScript 或 Babel 的路径别名配置。即便 VSCode 能通过 tsconfig 识别别名，Metro 仍需单独配置才能正确解析跨目录的模块引用。

解决步骤 #

1. 配置 Metro 的模块解析规则 #

在 mobile 项目根目录创建或修改 metro.config.js，添加 resolver 和 watchFolders 配置，明确 @common 指向的实际路径：

const path = require('path');
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const customConfig = {
  resolver: {
    extraNodeModules: new Proxy({}, {
      get: (target, moduleName) => {
        if (moduleName === '@common') {
          // 指向 monorepo 根目录下的 common 文件夹
          return path.join(__dirname, '../common');
        }
        // 其他模块仍从本地 node_modules 查找
        return path.join(__dirname, `node_modules/${moduleName}`);
      },
    }),
  },
  // 让 Metro 监听 common 目录的文件变化，确保热更新生效
  watchFolders: [path.join(__dirname, '../common')],
};

module.exports = mergeConfig(getDefaultConfig(__dirname), customConfig);

2. 验证 tsconfig.json 和 babel.config.js 的配置正确性 #

确认已有配置的路径指向正确（相对于 mobile 项目根目录）：

• tsconfig.json：

  {
    "compilerOptions": {
      "baseUrl": "./",
      "paths": {
        "@common/*": ["../common/*"]
      }
    }
  }
  

• babel.config.js（需确保已安装 babel-plugin-module-resolver）：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            '@common': '../common',
          },
        },
      ],
    ],
  };
  

额外注意事项 #

• 清除 Metro 缓存：运行 npx react-native start --reset-cache，避免缓存残留导致的解析异常。
• 检查文件路径拼写：确认 format.ts 存在于 common/utils/ 下，注意大小写（Metro 在类 Unix 系统下对大小写敏感）。
• 若使用 workspace 工具（如 Yarn Workspaces），需确保 common 目录已被正确纳入 workspace 范围，但上述 Metro 配置无需依赖 workspace 也能生效。

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