Is react-dom/client required?

[Trisped]

When I followed the single-spa-reactquick start instructions, it indicated that I should use import ReactDOMClient from "react-dom/client"; instead of import ReactDOM from "react-dom";. When I make the change, I get a run time error:
application '@new/app' died in status SKIP_BECAUSE_BROKEN: m.createRoot is not a function
TypeError: application '@new/app' died in status SKIP_BECAUSE_BROKEN: m.createRoot is not a function
at exports.createRoot (https://localhost:8080/new-app.js:5404:16)
at u.elementToRender (https://localhost:8080/new-app.js:12748:5162)
at https://localhost:8080/new-app.js:12748:5262
at new Promise ()
at p (https://localhost:8080/new-app.js:12748:4017)
at https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.dev.js:303:33

The URL at the end seems strange, since all my package.json indicates that single-spa 6.0.1 should be used:

{
  "name": "@new-app",
  "version": "0.0.3",
  "license": "UNLICENSED",
  "scripts": {},
  "devDependencies": {
    "@babel/core": "^7.23.3",
    "@babel/eslint-parser": "^7.23.3",
    "@babel/plugin-transform-runtime": "^7.23.3",
    "@babel/preset-env": "^7.23.3",
    "@babel/preset-react": "^7.23.3",
    "@babel/preset-typescript": "^7.23.3",
    "@babel/runtime": "^7.23.3",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^14.2.2",
    "babel-jest": "^27.5.1",
    "concurrently": "^6.2.1",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-ts-react-important-stuff": "^3.0.0",
    "eslint-plugin-prettier": "^3.4.1",
    "husky": "^7.0.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.5.1",
    "jest-cli": "^27.5.1",
    "prettier": "^2.3.2",
    "pretty-quick": "^3.1.1",
    "ts-config-single-spa": "^3.0.0",
    "typescript": "^4.3.5",
    "webpack": "^5.89.0",
    "webpack-cli": "^4.10.0",
    "webpack-config-single-spa-react": "^4.0.0",
    "webpack-config-single-spa-react-ts": "^4.0.0",
    "webpack-config-single-spa-ts": "^4.1.4",
    "webpack-dev-server": "^4.0.0",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "@bc/auth-helper": "^0.0.3",
    "@bc/logger": "^0.0.3",
    "@bc/styleguide": "^0.0.3",
    "@types/jest": "^29.5.12",
    "@types/react": "^18.2.73",
    "@types/react-dom": "^18.2.23",
    "@types/systemjs": "^6.1.1",
    "@types/webpack-env": "^1.16.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3",
    "single-spa": "^6.0.1",
    "single-spa-react": "^6.0.1"
  },
  "resolutions": {
    "@types/react": "^18.2.73",
    "@types/react-dom": "^18.2.23"
  },
  "types": "dist/new-app.d.ts"
}

The new-app.tsx file which creates the error:

import React from "react";
import ReactDOMClient from "react-dom/client"; 
import singleSpaReact from "single-spa-react";
import Root from "./root.component";

const lifecycles = singleSpaReact({
  React,
  ReactDOMClient,
  rootComponent: Root,
  errorBoundary(err, info, props) {
    // Customize the root error boundary for your microfrontend here.
    return null;
  },
});

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

The only thing I can think of is that the singleSpaReact method was changed to get the client from ReactDOM...
I thought I should check here just in case.

[MilanKovacic]

Hi, did you solve the issue? Check your import maps to ensure you are using the latest version of single-spa.

[Trisped]

Hi, did you solve the issue? Check your import maps to ensure you are using the latest version of single-spa.

@MilanKovacic I was unable to confirm that the reported change is still required.

My related import maps are:

        "react": "https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js",
        "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js",
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@6.0.1/lib/es2015/system/single-spa.min.js"

These are the only packages I have marked as external since they are the only ones I have full URLs for. I have not yet figured out how to import from a package.

[franmc01]

something similar happened to me but I corrected it by removing ^ from the react and react-dom dependencies. As they released that new version of react 18.3.0 is giving conflicts if it detects several versions of react.

[KsAkira10]

import React from "react";
import ReactDOMClient from "react-dom/client"; 
import singleSpaReact from "single-spa-react";
import Root from "./root.component";

const lifecycles = singleSpaReact({
  React,
  ReactDOMClient,
  renderType: "createRoot",   // <--- add this
  rootComponent: Root,
  errorBoundary(err, info, props) {
    // Customize the root error boundary for your microfrontend here.
    return null;
  },
});

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