create-single-spa搭建的Typescript应用无法加载Rollup构建的React组件库

你遇到的报错如下：

Uncaught Error: application '@org/test' died in status LOADING_SOURCE_CODE: Error loading http://localhost:8500/org-test.js (SystemJS Error#3) at HTMLScriptElement. (system.js:640)

该报错核心原因是single-spa默认依赖SystemJS加载外部模块，你的Rollup打包的组件库输出格式、导入映射规则和create-react-app的默认webpack加载逻辑不兼容，因此在CRA中运行正常，在single-spa应用中加载失败，可按以下方案解决：

方案1：适配SystemJS加载规则（适合组件库作为远程共享模块使用的场景） #

• 第一步：修改组件库的Rollup打包配置，输出SystemJS兼容格式，同时external掉react、react-dom等公共依赖，避免重复打包。配置示例：

// rollup.config.js
export default {
  input: 'src/index.ts',
  external: ['react', 'react-dom'], // 所有peerDependencies都要列在这里
  output: [
    {
      format: 'system', // 核心配置：输出system格式
      dir: 'dist',
      entryFileNames: 'index.system.js',
      name: '@org/your-component-lib', // 和你导入时的组件库模块名保持一致
    }
  ],
  // 原有plugins配置保持不变，保留ts、babel等处理逻辑即可
}

• 第二步：调整组件库本地开发服务的跨域配置，避免跨域拦截SystemJS的加载请求。如果用http-server启动组件库服务，命令改为：

http-server dist --cors -p 你的组件库服务端口

• 第三步：在single-spa根应用的导入映射（importmap）中添加组件库的地址映射，确保SystemJS能找到正确的加载路径：

<!-- 根应用的index.html -->
<script type="systemjs-importmap">
{
  "imports": {
    "@org/your-component-lib": "http://localhost:你的组件库服务端口/index.system.js"
  }
}
</script>

• 第四步：在测试应用@org/test的webpack配置中，将组件库设为external，避免重复打包进应用代码：

// @org/test 应用的webpack.config.js
module.exports = {
  externals: ['@org/your-component-lib']
}

方案2：直接打包进应用（快速验证场景） #

如果你不需要把组件库作为公共共享模块使用，只是要在测试应用里验证功能，可以直接修改测试应用的webpack配置，移除组件库的external规则，让webpack直接把组件库代码打包进应用，和CRA的加载逻辑保持一致，即可直接复现CRA中的正常运行效果。

额外检查项 #

• 确认组件库的package.json中main/module字段指向正确的打包输出文件
• 确认Typescript配置中moduleResolution设置为bundler或NodeNext，避免编译时找不到模块的问题

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