将我的单 Spa 更新到 React 18 时出现错误

Question

我正在开发一个单spa React版本5.9.4，目前它配置了react 17。但是当我尝试更新到React 18时，它无法识别来自DOMClient的createRoot方法，该方法是设置的像这样：

import React from 'react';
import * as ReactDOMClient from 'react-dom/client';
import singleSpaReact from 'single-spa-react';

import Root from './root.component';

const lifecycles = singleSpaReact({
  React,
  ReactDOMClient,
  rootComponent: Root,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  errorBoundary(err, info, props) {
    // Customize the root error boundary for your microfrontend here.
    return null;
  },
});
export const { bootstrap, mount, unmount } = lifecycles;

这是我遇到的错误：

*尽管我已经配置了 React 18，但它使用的是 render 方法，因此它的行为与 React 17 类似。

** 未捕获的类型错误：应用程序“@react-mf/hello-world”在 SKIP_BECAUSE_BROKEN 状态下死亡：m.createRoot 不是函数**

我的项目的版本依赖关系：

• 反应18.2.0
• react-dom 18.2.0
• 单水疗中心5.9.4
• 单 Spa 反应 5.0.0
• webpack 5.75.0

非常感谢任何帮助！

Answer 1

我能够解决它！问题是我需要更新我的单个 spa 根项目的 CDN React 版本。

Answer 2

我修复了它，没有在任何地方更改反应版本。

single-spa-react

支持并且可以接受。

我们可以看到

renderType

可以有。 我们必须选择

createRoot

。

所以总的来说，你的

index.js

代码看起来像这样

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import singleSpaReact from "single-spa-react";

const RenderApp = (props) => {
  console.log({ props });
  return (
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
};
const appLifecycles = singleSpaReact({
  renderType: "createRoot",  // Pass this prop in order to correctly identify createRoot
  React,
  ReactDOM,
  rootComponent: RenderApp,
  errorBoundary: () => {
    return null;
  },
});

// const root = ReactDOM.createRoot(document.getElementById("root"));
// root.render(<RenderApp />);

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

希望有帮助。