Support React 18 identifierPrefix with createRoot/hydrateRoot

[JamiesWhiteShirt]

ReactDOM has the identifierPrefix option for createRoot/hydrateRoot which should be used when multiple roots are used on the same page to support the new useId hook. Having multiple roots happens to be particularly likely when using single-spa, so identifierPrefix should be supported and recommended to use with single-spa-react.

[filoxo]

Good to know! I hadn't come across this at all when implementing React 18 support. I can look into this.

[WViiras]

this seems like a workaround to the problem

const lifecycles = singleSpaReact({
  errorBoundary(err, info, props) {
    return null;
  },
  React,
  ReactDOMClient: {
    ...ReactDOMClient,
    createRoot: (container: Element | DocumentFragment, options?: RootOptions) => {
      return ReactDOMClient.createRoot(container, {
        ...options,
        identifierPrefix: "id-prefix",
      });
    },
  },
  renderType: "createRoot",
  rootComponent: Root,
});

[lucasfreyptml]

How do you make this work with TS ? I am getting this with your method :

Argument of type '{ errorBoundary(err: Error, info: ErrorInfo, props: AppProps): any; React: typeof React; ReactDOMClient: any; renderType: "createRoot"; rootComponent: () => Element; }' is not assignable to parameter of type 'SingleSpaReactOpts<AppProps>'.
  Object literal may only specify known properties, and 'ReactDOMClient' does not exist in type 'SingleSpaReactOpts<AppProps>'