Problem referencing 'react-dom/client' in React 18

[StuffOfInterest]

• SystemJS Version: 6.12.1
• Which library are you using?
  • system.js
  • s.js
  • system-node.cjs
• Which extras are you using?
  • AMD extra
  • Named Exports
  • Named Register
  • Transform
  • Use Default
  • Global
  • Dynamic Import Maps
• Are you using any custom hooks? Yes

(function () {
    var endsWithFileExtension = /\/?\.[a-zA-Z]{2,}$/;
    var originalResolve = System.constructor.prototype.resolve;
    System.constructor.prototype.resolve = function () {
        const url = originalResolve.apply(this, arguments);
        const result = endsWithFileExtension.test(url) || url.indexOf('?') !== -1 ? url : url + '.js';
        return result;
    };
})();

(function() {
    var originalCreateScript = System.constructor.prototype.createScript;
    System.constructor.prototype.createScript = function(url) {
        if (url.indexOf("googleapis.com") > -1) {
            const script = document.createElement('script');
            script.async = true;
            script.src = url;
            return script;
        }

        return originalCreateScript(url);
    }
})();

Question

Trying to convert from React 17 to React 18 in an MVC based website that uses TypeScript for much of the code. Had React 17 working with an import map that contained the following:

{
	"imports": {
		"react": "/lib/react/umd/react.development.js",
		"react-dom": "/lib/react-dom/umd/react-dom.development.js"
	}
}

To get my component on the page I was using ReactDOM.render() before with this import:

import ReactDOM from 'react-dom';

New method of rendering the component requires a different types of import:

import { createRoot } from 'react-dom/client';

Unfortunately, when I try this pattern, and then use the createRoot() function, I get the following error:

Uncaught (in promise) Error: Unable to resolve bare specifier 'react-dom/client' from https://localhost:44374/js/components/nameListEdit.js (SystemJS Error#8 https://git.io/JvFET#8)

I've tried a few things but can't come up with a way to make "react-dom/client" map back into the react-dom module. The closest I've gotten is if I change the map for "react-dom" to "react-dom/client" the component does render, but I see another error in the console:

react_devtools_backend.js:3973 Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

The TypeScript code being used to start up the component reads:

const props: ListProps = { rows: names, languages: languages };
const component = React.createElement(NameListEdit, props);
const element = document.getElementById(elementId);
const root = createRoot(element);
root.render(component);

[arthurdenner]

I think that, in this case, you need a new entry in the import map.

{
  "imports": {
    "react": "/lib/react/umd/react.development.js",
    "react-dom": "/lib/react-dom/umd/react-dom.development.js",
    "react-dom/client": "/lib/react-dom/path-for-client-file.js"
  }
}

[StuffOfInterest]

@arthurdenner, the "react-dom/client" logic appears to be hosted in the "react-dom.development.js" file and not in a separate file. When I point "react-dom" at that JS file I end up with the Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client" message mentioned above.

[StuffOfInterest]

It turns out the issue was with React 18. React 18.0.0 was generating the error described above. I just updated to React 18.1.0 and the error went away. My last version of the code, which generated the warning about the import source above, was the correct one. That means that having the import map read the following is the only SystemJS change that was necessary:

{
  "imports": {
    "react": "/lib/react/umd/react.development.js",
    "react-dom/client": "/lib/react-dom/umd/react-dom.development.js"
  }
}

After that, the TypeScript code I listed above worked fine.

Just to confirm, I switched back to React 18.0.0. The error returned. Moving to 18.1.0 once again got rid of the error with no other changes needed.

And with a little further research, the issue is a listed fix in the 18.1.0 release notes:

• Fix the false positive warning about react-dom/client when using UMD bundle. (@alireza-molaee in ignore checking client entry point for UMD build facebook/react#24274)

[arthurdenner]

@StuffOfInterest, I'm glad you could figure out the issue.
Just FYI, the 'react-dom/client' logic is also in the client.js file - you can see it in unpkg, for example.
This is what I mean by "add it as an entry in the import map".