Expo Web打包Bug:多文件匹配路由名称问题求助
问题描述
- 使用
create-expo-app初始化的React Native Expo应用,此前运行正常,近期仅在Web开发模式下触发未捕获异常,iOS、Android及Expo Go端运行无异常。 - 核心问题:
app目录下第一个文件夹中的第一个文件会出现路由名称重复匹配问题;修改文件夹/文件名后,问题会转移到新的首文件夹及文件,与文件内容无关。 - 已尝试无效操作:
- 执行
expo start -c清除缓存 - 执行
yarn cache clear清除缓存 - 删除
.expo文件夹重建缓存
- 执行
- 异常范围:旧版本代码也出现该问题。
项目package.json配置
{ "name": "beta-boost", "version": "1.0.0", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "test": "jest --watchAll" }, "jest": { "preset": "jest-expo" }, "dependencies": { "@expo/vector-icons": "^13.0.0", "@react-navigation/native": "^6.0.2", "@reduxjs/toolkit": "^1.9.5", "@types/react-redux": "^7.1.25", "expo": "~48.0.10", "expo-av": "~13.2.1", "expo-font": "~11.1.1", "expo-image-picker": "~14.1.1", "expo-linking": "~4.0.1", "expo-router": "^1.5.2", "expo-splash-screen": "~0.18.2", "expo-status-bar": "~1.4.4", "expo-system-ui": "~2.2.1", "expo-web-browser": "~12.1.1", "firebase": "^9.19.1", "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.71.7", "react-native-gesture-handler": "^2.12.0", "react-native-gifted-chat": "^2.0.1", "react-native-paper": "^5.6.0", "react-native-reanimated": "^3.3.0", "react-native-safe-area-context": "4.5.0", "react-native-screens": "~3.20.0", "react-native-uuid": "^2.0.1", "react-native-web": "~0.18.10", "react-redux": "^8.0.5", "redux": "^4.2.1", "redux-persist": "^6.0.0", "thunk": "^0.0.1" }, "devDependencies": { "@babel/core": "^7.20.0", "@types/react": "~18.0.14", "@types/react-native": "^0.72.2", "@typescript-eslint/eslint-plugin": "^5.57.1", "@typescript-eslint/parser": "^5.57.1", "eslint": "^8.37.0", "eslint-config-universe": "^11.2.0", "jest": "^29.2.1", "jest-expo": "~48.0.0", "prettier": "^2.8.7", "react-test-renderer": "18.2.0", "typescript": "^4.9.4" }, "eslintConfig": { "extends": "universe/native" }, "private": true }
解决方向
- 检查expo-router版本兼容性:当前使用
expo-router@1.5.2搭配expo@~48.0.10,可尝试升级expo-router到expo 48对应的最新兼容版本(如1.5.6),或降级到同版本分支的稳定版,排查路由匹配逻辑在Web端的bug。 - 规避文件排序触发的问题:在
app目录下添加一个名称排序最靠前的空文件夹(如__dummy__),将问题转移到该空文件,验证是否能临时规避异常,同时排查打包工具的文件遍历逻辑差异。 - 手动配置路由排查自动路由问题:临时禁用
expo-router的自动路由功能,手动编写路由表,对比是否还出现重复匹配问题,确认是否为自动路由解析逻辑在Web端的异常。 - 排查依赖冲突或Web端兼容性:检查
react-native-web@~0.18.10、react-native-reanimated@3.3.0与当前expo版本的Web端兼容性;尝试临时移除非核心依赖(如react-native-gifted-chat、redux-persist),逐步排查是否由第三方依赖触发路由异常。 - 扩大缓存清理范围:除项目缓存外,清理
yarn/npm全局缓存、浏览器开发缓存;使用expo export:web生成生产包,验证生产模式下是否存在同样问题,缩小问题范围。
内容的提问来源于stack exchange,提问作者Colin Hale
相关产品推荐
相关产品推荐

