TurboRepo Monorepo中安装expo-router遇冲突问题求助

一、修复 Web 打包错误（引入expo-router/entry时的问题） #

问题根源是 monorepo 下 Metro/Webpack 无法正确解析跨包依赖路径，需调整配置文件：

1. 配置 Metro 适配 Monorepo #

在 Expo 项目根目录的metro.config.js中添加 Monorepo 路径监听和依赖解析规则：

const { getDefaultConfig } = require('expo/metro-config');
const path = require('path');

const config = getDefaultConfig(__dirname);

// 让 Metro 监听 Monorepo 根目录的所有依赖
config.watchFolders = [path.resolve(__dirname, '../../')];

// 优先解析本地项目依赖，再解析 Monorepo 根依赖
config.resolver.nodeModulesPaths = [
  path.resolve(__dirname, './node_modules'),
  path.resolve(__dirname, '../../node_modules'),
];

module.exports = config;

2. 配置 Webpack 修复 Expo Router 入口解析 #

在 Expo 项目根目录创建webpack.config.js，手动指定 Expo Router 入口路径：

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const path = require('path');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  
  // 加入 Monorepo 依赖解析路径
  config.resolve.modules.unshift(
    path.resolve(__dirname, './node_modules'),
    path.resolve(__dirname, '../../node_modules')
  );

  // 直接映射 expo-router/entry 到本地安装的模块文件
  config.resolve.alias['expo-router/entry'] = path.resolve(
    __dirname,
    './node_modules/expo-router/entry'
  );

  return config;
};

二、修复 Package.json 主入口模块解析错误 #

不要直接将main字段设为expo-router/entry，按以下步骤配置：

1. 在项目根目录创建index.js，内容仅需一行：

import 'expo-router/entry';

2. 修改项目根目录package.json的main字段：

{
  "main": "./index.js"
}

三、统一 Monorepo 依赖版本 #

在 Monorepo 根目录的package.json中锁定所有核心依赖的版本，避免子项目依赖版本冲突：

{
  "devDependencies": {
    "expo": "~49.0.15",
    "expo-router": "~2.0.0",
    "react-native": "0.72.6",
    "react-native-web": "~0.19.9"
  }
}

执行包管理器命令（如npm install/pnpm install）确保所有子项目使用统一版本的依赖。

四、验证三端运行 #

1. Native 端（iOS/Android） #

在 Expo 项目目录执行：

npx expo start -c

选择对应平台启动，验证路由页面是否正常加载。

2. Web 端 #

同样在项目目录执行：

npx expo start --web -c

检查打包是否成功，访问浏览器确认路由功能正常。

额外注意事项 #

• 确保 Expo 项目根目录存在app文件夹，且包含_layout.js和至少一个页面文件（如index.js），这是 Expo Router 约定式路由的要求：

  // app/_layout.js
  import { Stack } from 'expo-router';
  export default function RootLayout() {
    return <Stack />;
  }
  

• 清理缓存：遇到异常时优先执行npx expo start -c清除 Metro 缓存，或删除node_modules、锁文件后重新安装依赖。
• 统一包管理器：Monorepo 内避免混用 npm、yarn、pnpm，防止依赖安装混乱。

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