使用Webpack打包Expo-Router项目时遇“Multiple files match route name”错误

1. 排查项目结构与路由冲突 #

• 确保app/目录在项目根路径下，不要嵌套在子文件夹里，否则Webpack会找不到路由入口
• 检查所有路由文件：Groups（比如(tabs)/）内部的路由不要和外层app/下的文件重名，比如同时存在app/(tabs)/home.js和app/home.js会触发Multiple files match the route name错误，必须删除其中一个或者调整路径

2. 修正根目录index.js入口 #

放弃文档里的import "expo-router/entry";写法，直接用以下代码作为入口：

import { registerRootComponent } from 'expo';
import { ExpoRouter } from 'expo-router';

registerRootComponent(ExpoRouter);

如果是纯Web环境，也可以用ReactDOM渲染：

import { ExpoRouter } from 'expo-router';
import { render } from 'react-dom';

render(<ExpoRouter />, document.getElementById('root'));

注：Windows系统下路径分隔符（\）会导致Webpack解析../../app出错，这种写法可以绕开路径解析问题

3. 配置正确的Webpack插件 #

如果自定义了Webpack配置，必须集成Expo-Router的官方插件，避免路由解析异常：

const { withExpoRouter } = require('expo-router/webpack');

module.exports = withExpoRouter({
  // 你的其他Webpack配置（如resolve、module等）
  resolve: {
    modules: [__dirname, 'node_modules'], // 确保根目录被加入模块解析路径
  },
});

4. 本地预验证构建 #

部署到Vercel前先本地执行导出命令，提前排查问题：

npx expo export:web

如果这个命令执行失败，说明项目本身有路由或配置问题，先本地修复再部署

5. Vercel部署配置 #

• 在Vercel项目的「构建命令」中设置：npx expo export:web
• 「输出目录」设置为dist（Expo导出Web的默认目录）

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