使用create-single-spa创建Root Config时遇模块语法错误求助

问题场景 #

通过create-single-spa --moduleType root-config创建根配置项目，启动后浏览器抛出错误：

donexfdz-root-config-root-config.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at donexfdz-root-config-root-config.js:1:1)

尝试修改Webpack配置输出CommonJS格式未解决问题。

具体解决步骤 #

1. 修正HTML入口的script标签类型 #

加载root-config脚本的标签必须添加type="module"属性，告诉浏览器这是ES模块：

<!-- 错误写法 -->
<script src="/donexfdz-root-config-root-config.js"></script>

<!-- 正确写法 -->
<script type="module" src="/donexfdz-root-config-root-config.js"></script>

2. 调整Webpack输出配置 #

不要将输出格式改为CommonJS，single-spa依赖SystemJS加载ES模块，需确保Webpack配置正确：

// webpack.config.js
module.exports = {
  // ...其他配置
  output: {
    filename: '[name].js',
    libraryTarget: 'system', // 关键：指定为system格式，适配single-spa
    path: path.resolve(__dirname, 'dist'),
  },
  // 添加externals，让SystemJS处理模块导入
  externals: ['single-spa', '@donexfdz/root-config'],
};

3. 配置SystemJS正确识别模块 #

在index.html中确保SystemJS的配置指定模块格式为ES模块：

<script src="https://cdn.jsdelivr.net/npm/systemjs@6.14.0/dist/system.min.js"></script>
<script>
  System.config({
    map: {
      "@donexfdz/root-config": "/donexfdz-root-config-root-config.js"
    },
    packages: {
      "@donexfdz/root-config": {
        main: "donexfdz-root-config-root-config.js",
        format: "esm" // 明确告诉SystemJS这是ES模块
      }
    }
  });
  System.import("@donexfdz/root-config");
</script>

4. 检查Babel配置是否干扰 #

如果项目使用Babel，确保没有启用将ES模块转为CommonJS的插件（如babel-plugin-transform-modules-commonjs），保持Babel输出ES模块：

// .babelrc 或 babel.config.json
{
  "presets": [
    ["@babel/preset-env", { "modules": false }] // modules设为false，保留ES模块格式
  ]
}

5. 移除package.json中的错误配置 #

如果package.json中存在"type": "commonjs"字段，将其改为"type": "module"或直接删除，避免影响模块解析。

核心原因说明 #

浏览器默认将未指定type="module"的脚本视为普通脚本，无法解析ES模块的import语句。single-spa的模块体系基于SystemJS和ES模块，强行转为CommonJS格式会破坏其加载逻辑，因此需要从模块识别、打包配置、加载器配置三个层面统一保持ES模块格式。

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