升级single-spa至React 18时createRoot方法报错求助

问题原因 #

你当前使用的single-spa-react 5.0.0版本并不兼容React 18的createRoot API，该版本内部仍依赖React 17的render逻辑，无法识别你传入的ReactDOMClient参数，因此抛出createRoot is not a function错误。

解决方案 #

1. 升级single-spa-react到兼容版本 #

需要将single-spa-react升级到6.0.0及以上版本，该版本开始适配React 18的createRoot渲染模式：

npm install single-spa-react@latest
# 或使用yarn
yarn add single-spa-react@latest

2. 修正single-spa-react配置 #

升级后配置方式有所调整，无需单独传入ReactDOMClient，改为通过renderType指定使用createRoot：

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Root from './root.component';

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Root,
  // 指定使用React18的createRoot进行渲染
  renderType: "createRoot",
  errorBoundary(err, info, props) {
    // 自定义错误边界逻辑
    return null;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

3. 清理依赖缓存避免版本冲突 #

删除现有依赖和锁文件，重新安装确保所有依赖版本统一：

rm -rf node_modules package-lock.json
npm install

4. 检查微前端架构中的版本一致性 #

如果是微前端项目，需确保宿主应用及其他关联微应用都升级到React 18，避免全局环境中存在React 17版本导致的降级问题。若需隔离版本，可通过webpack的externals配置分别管理，但同架构内尽量保持React版本统一。

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