single-spa React项目中SVG生成正常但加载损坏该如何解决？

问题排查和修复方案 #

1. 规则优先级冲突 #

single-spa默认webpack配置内置了asset/resource规则处理svg等静态资源，你新增的svg规则优先级低于默认规则，导致svg资源被默认规则优先处理，没有走你配置的svg-url-loader。
解决方法：先清除默认的svg处理规则，同时给自定义规则添加type: 'javascript/auto'避免webpack5内置资源处理规则冲突：

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: "Daboo1998",
    projectName: "react-module",
    webpackConfigEnv,
    argv,
  });

  // 移除默认的svg处理规则
  defaultConfig.module.rules = defaultConfig.module.rules.filter(rule => {
    return !rule.test.toString().includes('svg')
  })

  return merge(defaultConfig, {
    module: {
      rules: [
        {
          test: /\.svg$/,
          type: 'javascript/auto',
          use: [
            {
              loader: 'svg-url-loader',
              options: {
                limit: 10000000,
                esModule: false // 关闭ES模块导出，直接导出字符串路径
              },
            },
          ],
        },
      ]
    }
  });
};

2. 导出格式不匹配 #

svg-url-loader默认开启ES模块导出，你import拿到的是{default: '资源路径/base64字符串'}的对象，而非直接的字符串，传入img的src属性时会被转为[object Object]导致加载失败，上述配置中添加的esModule: false即可解决该问题。

3. 公共路径配置异常 #

如果你的svg体积超过设置的10MB limit，会被打包为独立的带hash文件，single-spa子应用默认publicPath为相对路径，部署后会从主应用域名下请求子应用的svg资源导致404，需要手动指定子应用的部署路径：

return merge(defaultConfig, {
  output: {
    publicPath: 'https://你的子应用实际部署域名/路径/'
  },
  // 其余配置保持不变
})

内容的提问来源于stack exchange，提问作者Danny Richard Aboo