single-spa微前端构建报systemjs-webpack-interop配置错误

你在项目根目录手动安装的webpack@^5.73.0没有被构建流程实际调用，触发报错的核心是版本与配置不匹配：

• 你使用的@vue/cli-service@~4.5.0版本内置依赖webpack@4.x，构建时Node模块解析规则会优先读取cli-service内部的webpack4，完全忽略你根目录安装的webpack5，实际运行的webpack版本不满足>=5.0.0-beta.15的要求。
• webpack4本身不原生支持libraryTarget: 'system'的输出配置，你在vue.config.js里手动写的该配置不会生效，也无法通过systemjs-webpack-interop的校验。
• 额外兼容隐患：你安装的vue-loader@^17.0.0是适配webpack5+Vue3的版本，和当前Vue2+Vue CLI4的环境不匹配，就算解决当前报错后续也会触发编译问题。

优先选择升级Vue CLI到5.x版本（原生适配webpack5，和single-spa生态兼容性最好），步骤如下：

• 修改package.json内的依赖版本：
  • 将@vue/cli-plugin-babel、@vue/cli-plugin-eslint、@vue/cli-service的版本从~4.5.0改为~5.0.0
  • 将vue-cli-plugin-single-spa版本升级到^3.0.0以上（适配Vue CLI5）
  • 删掉手动添加的vue-loader依赖，Vue CLI会自动安装适配Vue2版本的vue-loader，不需要手动指定
• 删除项目下的node_modules目录和锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行依赖安装命令。
• 简化vue.config.js配置，升级后的single-spa插件会自动配置output.libraryTarget为system，不需要手动重复设置，最终配置如下：

module.exports = {
  chainWebpack: (config) => {
    config.externals(["vue", "vue-router", "single-spa"])
  }
};

• 安装完成后执行npx webpack -v，确认输出的webpack版本为5.x即可正常构建。

如果因项目限制必须留在Vue CLI4（webpack4）环境，按以下方式调整：

• 降级相关依赖到兼容webpack4的版本：将vue-cli-plugin-single-spa锁定为1.4.0，该版本依赖的systemjs-webpack-interop支持webpack4环境。
• 删除vue.config.js里手动设置的configureWebpack.output.libraryTarget配置，插件会自动处理webpack4下的System.js格式输出适配。
• 删掉vue-loader@^17.0.0依赖，重装依赖后即可正常构建。

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