07-1008906-Safari登录报错.md
4.34 KB
缺陷 1008906 - 部分苹果笔记本 Safari 浏览器登录报错无法跳转
原始需求(一字不差)
缺陷标题:部分苹果笔记本safai浏览器登录会报错,无法登录跳转成功
状态:new | 负责人:尹帮会 | 优先级:medium | 创建者:尹帮会
创建时间:2026-03-13 10:45:22 | 修改时间:2026-03-19 12:27:47
原始描述:
[图片: https://file.tapd.cn//tfl/captures/2026-03/tapd_67139335_base64_1773369821_174.png]
控制台清除于:11:37:53
成功导航到:- "/auth"
LanguageSwitcher mounted, current locale: - "zh-CN"
路由错误: 7 SyntaxError: Invalid regular expression: invalid group specifier name parseModule (匿名函数) asyncFunctionResume (匿名函数) promiseReactionJobWithoutPromise (匿名函数)
- index-B9mQj3Cz.js:9:136594 forEach oe — vue-foundation-CF2dS5jX.js:43:169414 promiseReactionJob index-B9mQj3Cz.js:9:136546 LanguageSwitcher-B--4nNjM.js:1:1223 index-B9mQj3Cz.js:9:136594
图片理解
截图(2256 × 524 像素)- Safari DevTools 控制台
画面内容:
- Safari 浏览器开发者工具控制台截图
- 控制台顶部显示清除时间 11:37:53
- 第1行(蓝色):成功导航到
/auth路由,来源index-B9mQj3Cz.js:9:136546 - 第2行(蓝色):
LanguageSwitcher mounted, current locale: "zh-CN",来源LanguageSwitcher-B--4nNjM.js:1:1223 - 第3行(红色错误):路由错误展开项
- 错误类型:
SyntaxError: Invalid regular expression: invalid group specifier name - 调用栈:parseModule → 匿名函数 → asyncFunctionResume → 匿名函数 → promiseReactionJobWithoutPromise → 匿名函数(
index-B9mQj3Cz.js:9:136594)→ forEach → oe(vue-foundation-CF2dS5jX.js:43:169414)→ promiseReactionJob
- 错误类型:
关键信息:
- 路由导航到
/auth成功(蓝色日志正常) -
LanguageSwitcher组件成功挂载并打印 locale - 随后在路由解析阶段抛出正则表达式语法错误
- 错误发生在
LanguageSwitcher-B--4nNjM.js(LanguageSwitcher 组件的生产包) - 错误向上传播至主 bundle
index-B9mQj3Cz.js
根因分析
错误类型
SyntaxError: Invalid regular expression: invalid group specifier name
这是 Safari 遇到命名捕获组正则(Named Capture Groups,ES2018)时的报错形式:
/(?<year>\d{4})-(?<month>\d{2})/ // 老版 Safari 无法解析
为什么报错
- 项目
vite.config.ts中build.target设为"es2022" - esbuild 在
es2022目标下不会主动降级命名捕获组语法,直接输出到产物中 -
vue-i18n的内部依赖@formatjs/icu-messageformat-parser/intl-messageformat在解析 locale 消息时使用了命名捕获组正则 - 部分旧版 macOS Safari(13.x / 14.0 及更早)不支持命名捕获组,解析产物 JS 时抛出 SyntaxError
- 路由组件懒加载 LanguageSwitcher 时触发该错误,导致路由跳转失败
涉及文件
- 错误源:
node_modules/内 vue-i18n 相关依赖(@formatjs/icu-messageformat-parser) - 错误体现在产物:
LanguageSwitcher-B--4nNjM.js(LanguageSwitcher 的独立 chunk) - 配置文件:
vite.config.ts
修复方案
在 vite.config.ts 的 build.esbuild 中添加 supported: { 'named-capture-groups': false }。
该选项告知 esbuild:目标环境不支持命名捕获组,需将其转换为等效的无名捕获组形式,从而兼容旧版 Safari。
修改的文件
-
vite.config.ts:在build.esbuild中添加supported配置
具体改动
// vite.config.ts (build.esbuild 块)
esbuild: {
drop: isProd ? ["console", "debugger"] : [],
legalComments: "none",
target: "es2022",
// 强制降级命名捕获组正则,兼容部分旧版 Safari(Issue #1008906)
// Safari 13/14 部分版本不支持命名捕获组,会抛出 "invalid group specifier name" 错误
supported: {
'named-capture-groups': false,
},
},
测试结果
-
npm run type-check通过,无 TypeScript 错误 - 修复后需在旧版 Safari 验证登录流程正常
验收条件
- 老版本 Safari(13.x/14.0)打开登录页不再出现
SyntaxError: Invalid regular expression报错 - 登录后能正常跳转至工作台
- LanguageSwitcher 语言切换功能不受影响