single-spa应用出现ReactSharedInternals未定义错误的排查求助

错误信息 #

Uncaught TypeError: application '@single-spa/react-app' died in status LOADING_SOURCE_CODE: ReactSharedInternals

项目创建流程 #

root-config 创建选项 #

? Directory for new project root-config
? Select type to generate single-spa root config
? Which package manager do you want to use? npm
? Will this project use Typescript? No
? Would you like to use single-spa Layout Engine Yes
? Organization name (can use letters, numbers, dash or underscore) single-spa

React应用创建选项 #

? Directory for new project react-app
? Select type to generate single-spa application / parcel
? Which framework do you want to use? react
? Which package manager do you want to use? npm
? Will this project use Typescript? No
? Organization name (can use letters, numbers, dash or underscore) single-spa
? Project name (can use letters, numbers, dash or underscore) react-app

配置内容 #

index.ejs 中的importmap配置 #

<!DOCTYPE html>
...
    <script type="injector-importmap">
      {
        "imports": {
          "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@6.0.3/lib/es2015/esm/single-spa.min.js",
          "react": "https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js",
          "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"
        }
      }
    </script>
...
    <% if (isLocal) { %>
    <script type="injector-importmap">
      {
        "imports": {
          "@single-spa/root-config": "//localhost:9000/single-spa-root-config.js",
          "@single-spa/welcome": "https://cdn.jsdelivr.net/npm/single-spa-welcome/dist/single-spa-welcome.min.js",
          "@single-spa/react-app":"http://localhost:8500/single-spa-react-app.js"
        }
      }
    </script>
    <% } %>
...

microfrontend-layout.html 路由配置 #

<single-spa-router>
  <main>
    <route default>
      <application name="@single-spa/react-app"></application>
    </route>
  </main>
</single-spa-router>

问题描述 #

访问http://localhost:9000/时React应用无法正常加载，触发上述ReactSharedInternals错误。已确认浏览器引入的React、ReactDOM版本（v17.0.2）与React应用依赖版本一致，求其他可能的问题原因？

可能的问题原因及排查方向 #

• UMD与ESM模块不兼容：当前importmap使用的是React的UMD包（umd/react.production.min.js），但single-spa React应用默认是ESM格式。UMD包不会暴露ReactSharedInternals内部变量，导致应用代码访问失败。需替换为ESM版本：

  "react": "https://cdn.jsdelivr.net/npm/react@17.0.2/esm/react.production.min.js",
  "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/esm/react-dom.production.min.js"
  

• single-spa-react版本不匹配：检查React应用中single-spa-react的版本，确保与root-config的single-spa（v6.0.3）兼容，版本差异可能引发内部API调用异常。
• importmap合并异常：在浏览器控制台通过System.imports查看最终合并后的importmap，确认是否存在重复项或配置冲突，导致模块加载异常。
• 跨域限制问题：React应用运行在localhost:8500，root-config在9000，需确保React应用开发服务器配置了跨域允许（比如在package.json的start脚本添加--cors参数），跨域限制可能间接引发加载错误。
• React应用打包配置错误：检查React应用的webpack配置，确保externals正确配置为从importmap加载react和react-dom，而非打包进自身bundle：

  externals: ['react', 'react-dom']
  

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