为什么仅在vivo浏览器中出现Invalid escape错误？

样式排版错乱适配方案 #

• 优先确认用户端vivo浏览器的内核版本，多数预装版vivo浏览器基于低版本定制Chromium内核，对新CSS特性支持度较差：
  • 调整项目postcss配置的browserslist规则，新增Android >= 7匹配项，自动补全CSS厂商前缀
  • 在页面head中添加专属meta声明，禁用浏览器自带的智能排版、强制文本放大特性：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no, address=no, email=no">
  <meta name="HandheldFriendly" content="true">
  

  • 排查代码中是否使用了低版本内核不支持的CSS属性，包括flex-gap、aspect-ratio、CSS变量动态赋值等，可降级为兼容写法实现
• 若页面存在响应式布局错乱，可添加UA判断逻辑，对vivo浏览器单独做样式适配，UA匹配关键词为VivoBrowser

Next.js + Laravel 商品Feed渲染报错修复 #

你遇到的未显式声明正则仍抛出正则相关错误的问题，属于低版本Chromium内核的兼容通病：框架底层依赖、打包压缩过程生成的代码可能用到了高版本正则语法（后行断言、具名捕获组、Unicode属性转义等），在老内核下运行会直接报错。
修复步骤：

1. 调整Next.js打包配置，强制转译高版本JS语法为ES5兼容格式，修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 关闭SWC压缩避免生成兼容差的语法
  swcMinify: false,
  // 生产环境关闭sourcemap公开访问，解决报错跳转文件不存在问题
  productionBrowserSourceMaps: false,
  webpack: (config) => {
    config.module.rules.push({
      test: /\.js$/,
      exclude: /node_modules\/(?!(next|react|react-dom)\/)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-transform-named-capturing-groups-regex']
        }
      }
    })
    return config
  }
}

module.exports = nextConfig

2. 排查Laravel接口返回的商品数据是否包含未转义的特殊字符、反斜杠、换行符等，前端渲染时字符串处理逻辑可能触发隐式正则匹配抛出错误
3. 若仍存在报错，可在页面入口添加全局错误捕获逻辑，针对正则相关错误做降级处理，避免整个Feed模块白屏

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