React项目更新依赖后Safari报正则无效组名错误如何解决

这个报错是Safari对ES2018高级正则语法兼容缺失导致的，和依赖的逻辑破坏性变更无关：

• 能触发这个报错的正则语法只有两类：命名捕获组（形如(?<groupName>xxx)的写法）、正/负向后行断言（形如?<=xxx/?<!xxx的写法）
• Chrome、Firefox、Edge早在2019年之前就全量支持上述语法，所以其他浏览器运行完全正常；Safari直到14.1版本才正式支持这些特性，所有低于该版本的Safari（包括iOS14.5之前的系统自带Safari、所有iOS端第三方App内嵌WebView——苹果强制iOS上所有第三方浏览器必须用Safari内核，哪怕你装的是Chrome也一样）碰到这类语法会直接抛出正则解析错误，整个JS Chunk加载失败，直接导致页面白屏。
• 你更新依赖时，大概率是某个间接依赖的小版本迭代里偷偷加了上述不兼容正则写法，作者没做低版本Safari兼容测试，自然也不会打major版本的破坏性变更标记。

1. 本地执行npm run build打生产包，到build产物的js目录下找到报错对应的2.f80ba52b.chunk.js文件
2. 在文件里全局搜两个特征串：
   • 搜?<：覆盖命名捕获组、后行断言两类语法
   • 单独搜?<!、?<=：精准定位后行断言
3. 找到匹配的代码片段后，往上翻几行找webpack注入的模块路径标记，格式一般是/***/ "./node_modules/xxx包名/xxx.js":，直接就能定位到是哪个依赖带的不兼容代码。

• 要是定位到是第三方依赖的问题：要么把这个依赖回退到更新前没引入不兼容语法的版本；要么改babel配置，把这个依赖加入转译白名单，让babel把高级正则转成ES5兼容写法，别原样输出到产物里。
• 要是是自己业务代码写的这类正则：直接换兼容写法就行——命名捕获组改成普通数组下标取值，后行断言换成字符串截取+普通正则匹配的组合逻辑实现。
• 验证逻辑：改完重新build，把对应chunk文件拖到低版本Safari里直接跑，不再抛一模一样的正则错误就算修好。

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