Expo搭配Metro Bundler配置monorepo时外部模块无法解析react导入

AI 小北

2026-10-2

解决方案

1. 补全metro.config.js的依赖别名配置

你当前只配置了共享模块目录的别名，没有指定react、react-native、@babel/runtime等公共依赖的解析路径，Metro解析外部模块的导入时会优先在外部模块所在目录的上层查找这些依赖，找不到就会抛出报错。你需要把这些公共依赖统一指向主Expo项目的node_modules：

const path = require('path');

// 定义主项目node_modules路径
const projectNodeModules = path.resolve(__dirname, './node_modules');

const extraNodeModules = {
    'modules': path.resolve(__dirname, '../../modules'),
    // 补全公共依赖别名，统一使用主项目的依赖包
    'react': path.resolve(projectNodeModules, 'react'),
    'react-native': path.resolve(projectNodeModules, 'react-native'),
    '@babel/runtime': path.resolve(projectNodeModules, '@babel/runtime')
};

const watchFolders = [
    path.resolve(__dirname, '../../modules')
];

const nodeModulesPaths = [projectNodeModules];

module.exports = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: true,
                inlineRequires: true,
            },
        }),
    },
    resolver: {
        extraNodeModules,
        nodeModulesPaths,
        sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx']
    },
    watchFolders
};

2. 调整babel.config.js配置

默认Babel不会转译主项目根目录之外的代码，你需要把共享模块目录加入到转译白名单：

const path = require('path');
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    // 把外部共享模块目录加入转译范围
    include: [
      path.resolve(__dirname, '../../modules')
    ]
  };
};