npm start启动React项目Webpack报正则表达式过大SyntaxError错误求助

根因 #

该问题由Chrome 95版本内置的V8引擎bug导致：V8在该版本中错误调整了正则表达式长度校验逻辑，webpack开发环境默认使用的eval系列源码映射（devtool）配置生成的换行处理正则会触发该校验报错，和项目代码、依赖版本无直接关联。

可用修复方案 #

• 快速临时修复：降级Chrome到94及以下版本，或切换至Edge、Firefox等其他浏览器进行开发
• 项目级兼容修复（无需改动浏览器）：修改webpack开发环境的devtool配置，替换掉带eval的源码映射模式
  若使用未eject的react-scripts项目，可通过customize-cra、craco等工具覆盖webpack配置，示例如下：

  // config-overrides.js（customize-cra配置文件）
  module.exports = function override(config, env) {
    if (process.env.NODE_ENV === 'development') {
      // 替换默认的eval-cheap-module-source-map
      config.devtool = 'cheap-module-source-map';
    }
    return config;
  }
  

  若已eject项目，直接修改config/webpack.config.js中开发环境对应的devtool字段即可
• 永久修复：将Chrome升级到96及以上版本，Chrome官方已在96版本中修复了该V8引擎bug，升级后即可恢复使用默认配置无需额外改动

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