A different approach to Webpack optional require

Author: alexeyr

node_package/src/reactHydrateOrRender.ts

@@ -10,17 +10,16 @@ const supportsReactCreateRoot = parseInt(ReactDOM.version.split('.')[0], 10) >=
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let reactDomClient: any;
 if (supportsReactCreateRoot) {
-  // eslint-disable-next-line camelcase
-  if (__webpack_require__) {
-    // we are in a Webpack environment (and in a node-modules directory of another project)
-    // See https://webpack.js.org/guides/dependency-management/#context-module-api
-    const reactDomContext = require.context('react-dom/', false, /^client\.js$/);
-    reactDomClient = reactDomContext('react-dom/client.js');
-  } else {
-    // we want a dynamic require here so that webpack doesn't rewrite it
-    const reactDomClientName = 'react-dom/client';
-    // eslint-disable-next-line global-require,import/no-dynamic-require
-    reactDomClient = require(reactDomClientName);
+  // 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;
   }
 }