Load react-dom correctly based on react version

Author: ahangarha

react_ujs/src/reactDomClient.js

@@ -0,0 +1,24 @@
+import ReactDOM from "react-dom"
+
+const reactMajorVersion = ReactDOM.version?.split('.')[0] || 16
+
+// TODO: once we require React 18, we can remove this and inline everything guarded by it.
+const supportsRootApi = reactMajorVersion >= 18
+
+let reactDomClient = ReactDOM
+
+if (supportsRootApi) {
+  // This will never throw an exception, but it's the way to tell Webpack the dependency is optional
+  // https://github.com/webpack/webpack/issues/339#issuecomment-47739112
+  // Unfortunately, it only converts the error to a warning.
+  try {
+    // eslint-disable-next-line global-require,import/no-unresolved
+    reactDomClient = require('react-dom/client');
+  } catch (e) {
+    // We should never get here, but if we do, we'll just use the default ReactDOM
+    // and live with the warning.
+    reactDomClient = ReactDOM;
+  }
+}
+
+export default reactDomClient

react_ujs/src/renderHelpers.js

@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom"
+import ReactDOM from "./reactDomClient"
 
 export function supportsHydration() {
   return typeof ReactDOM.hydrate === "function" || typeof ReactDOM.hydrateRoot === "function"