Chrome v53报Uncaught SyntaxError正则表达式标志无效问题求助

核心原因 #

你遇到的Uncaught SyntaxError: Invalid regular expression flags错误，本质是Chrome 53不支持ES2018+引入的正则表达式新特性（比如s/dotAll模式、v/Unicode属性转义、命名捕获组等），而Vue 3的@vue/shared等核心包在高版本中使用了这些新语法，你的polyfill配置仅补全了API，无法处理语法层面的新特性。

具体解决步骤 #

1. 定位报错的正则表达式 #

先查看@vue/shared/dist/shared.esm-bundler.js第85行的代码，确认是哪个不支持的正则flag（比如常见的/xxx/s中的s），这能帮你精准选择Babel插件。

2. 安装Babel正则转译插件 #

针对Chrome 53不支持的正则特性，安装对应的Babel插件来转译语法：

npm install @babel/plugin-transform-dotall-regex @babel/plugin-transform-named-capturing-groups-regex --save-dev

3. 修改Laravel Mix配置 #

更新webpack.mix.js，添加Babel插件配置并明确Webpack目标浏览器：

let mix = require('laravel-mix');
require('laravel-mix-polyfill');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .polyfill({
      enabled: true,
      useBuiltIns: "usage",
      targets: "chrome 53"
   })
   .babelConfig({
      plugins: [
         '@babel/plugin-transform-dotall-regex',
         '@babel/plugin-transform-named-capturing-groups-regex'
      ]
   })
   .webpackConfig({
      target: ['web', 'chrome53']
   });

4. 降级Vue及核心依赖到兼容版本 #

高版本Vue 3（3.3+）大量使用了旧浏览器不支持的语法，建议降级到适配Chrome 53的稳定版本，修改package.json：

{
  "dependencies": {
    "vue": "^3.2.31",
    "@vue/reactivity": "^3.2.31",
    "@vue/runtime-core": "^3.2.31",
    "@vue/runtime-dom": "^3.2.31",
    "@vue/shared": "^3.2.31"
  }
}

然后重新安装依赖：

rm -rf node_modules package-lock.json
npm install

5. 检查其他依赖 #

排查项目中其他第三方包是否也引入了不兼容的正则语法，如有需要同步降级到兼容Chrome 53的版本。

验证 #

重新打包项目后，部署到LG标牌设备测试，确认正则语法错误消失。

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