webpack://文件位置、生成逻辑及react-scripts升级构建报错排查

现有信息足够开展初步排查，不需要额外补充信息，按以下步骤操作即可定位解决。

• 报错里带webpack://前缀的路径不是磁盘上真实存在的文件，是webpack构建过程中把所有CSS模块、CSS引用的静态资源做合并处理后生成的虚拟模块映射，报错指向的行号是合并压缩后产物的位置，不是源CSS文件的行号，因此你在源文件里搜不到svg、xmlns相关内容是正常的，删除单个CSS文件后报错跳到其他文件，说明问题不是出在某一个CSS文件本身，是CSS处理链路的共性问题。

根因判断 #

这个报错是react-scripts 4.x升级到5.x后的典型兼容问题：react-scripts 5.x升级了内置的CSS压缩链，其中postcss-svgo插件会自动优化CSS里所有的SVG资源（包括background-image引用的本地SVG文件、data:image/svg+xml格式的内联SVG），你报错里的SVG内容出现<svg+xmlns这种格式，是因为传给svgo的SVG字符串是URL编码后的结果，属性之间的空格被转成了+号，svgo无法识别非法标签名直接抛出警告，CircleCI的严格模式会把构建警告判定为失败，最终中断流程。

排查步骤 #

第一步：临时调整配置定位问题源 #

先修改项目根目录的config-overrides.js（react-app-rewired的配置文件），临时关闭SVG压缩、开启sourcemap，方便定位出问题的SVG来源：

module.exports = function override(config) {
  // 找到内置的CSS压缩插件
  const cssMinimizer = config.optimization.minimizer.find(
    plugin => plugin.constructor.name === 'CssMinimizerPlugin'
  )
  if (cssMinimizer) {
    cssMinimizer.options.minimizerOptions = {
      ...cssMinimizer.options.minimizerOptions,
      preset: [
        'default',
        {
          svgo: false // 临时关闭SVG自动优化
        }
      ]
    }
  }
  // 开启sourcemap映射源文件
  config.devtool = 'source-map'
  return config
}

执行本地构建，构建完成后打开build/static/css目录下生成的未压缩CSS文件，搜索svg+xmlns关键词，找到对应所在的CSS规则，就能反向定位到是哪个源文件/第三方依赖引入了这个格式异常的SVG。

第二步：针对常见场景修复 #

定位到问题来源后，按对应场景修复即可：

• 场景1：自定义内联SVG双重编码
  如果是自己写的内联SVG，大概率是手动对SVG内容做了全量encodeURIComponent处理，把空格转成了+号。react-scripts 5内置的css-loader会自动处理data URI的编码，不需要手动编码，直接写入原始SVG内容，或者使用data:image/svg+xml;utf8,<svg xmlns="...">的UTF8格式写法即可。
• 场景2：第三方依赖CSS兼容问题
  如果是第三方组件库（比如旧版本的UI库、工具库）的CSS里带了格式不符合要求的内联SVG，优先升级对应依赖到适配react-scripts 5的版本即可；如果依赖没有更新版本，直接保留svgo: false配置关闭CSS内SVG优化也可以，对最终构建产物体积的影响非常小。
• 场景3：自定义插件异常处理
  如果config-overrides.js里额外引入了其他CSS处理插件、PostCSS插件，先逐个注释掉这类插件再构建，排查是哪个插件错误地把CSS里SVG的空格替换成了+号，移除或升级对应插件即可。

第三步：验证修复 #

修复完成后，把第一步临时加的svgo: false配置移除，重新执行构建命令，确认报错消失即可。如果需要临时绕过CircleCI的严格检查，也可以在构建命令前加CI=false环境变量，不推荐长期使用这个方案，优先处理根因。

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