revert some changes

lib/makeWebpackConfig.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
@@ -18,6 +19,22 @@ module.exports = async (playroomConfig, options) => {
   const relativeResolve = (requirePath) =>
     require.resolve(requirePath, { paths: [playroomConfig.cwd] });
 
+  let isLegacyReact = true;
+
+  try {
+    // eslint-disable-next-line no-sync
+    const pkgContents = fs.readFileSync(
+      relativeResolve('react-dom/package.json'),
+      {
+        encoding: 'utf-8',
+      }
+    );
+    const { version } = JSON.parse(pkgContents);
+    isLegacyReact = !(version.startsWith('18') || version.startsWith('0.0.0'));
+  } catch (e) {
+    throw new Error('Unable to read `react-dom` package json');
+  }
+
   const staticTypes = await getStaticTypes(playroomConfig);
 
   const ourConfig = {
@@ -164,6 +181,16 @@ module.exports = async (playroomConfig, options) => {
       new VanillaExtractPlugin(),
       new MiniCssExtractPlugin({ ignoreOrder: true }),
       ...(options.production ? [] : [new FriendlyErrorsWebpackPlugin()]),
+      // If using a version of React earlier than 18, ignore the
+      // react-dom/client import. This hack can be removed when
+      // support for older versions of React is removed.
+      ...(isLegacyReact
+        ? [
+            new webpack.IgnorePlugin({
+              resourceRegExp: /react-dom\/client$/,
+            }),
+          ]
+        : []),
     ],
     devtool: !options.production && 'eval-source-map',
   };

src/render.js

@@ -1,6 +1,19 @@
-import { createRoot } from 'react-dom/client';
+import ReactDOM, { version as reactDomVersion } from 'react-dom';
+
+// Uses the correct render API based on the available version of
+// `react-dom`. This hack can be removed when support for older
+// versions of React is removed.
+const canUseNewReactRootApi =
+  reactDomVersion &&
+  (reactDomVersion.startsWith('18') || reactDomVersion.startsWith('0.0.0'));
 
 export const renderElement = (node, outlet) => {
-  const root = createRoot(outlet);
-  root.render(node);
+  if (canUseNewReactRootApi) {
+    // eslint-disable-next-line import/no-unresolved
+    const { createRoot } = require('react-dom/client');
+    const root = createRoot(outlet);
+    root.render(node);
+  } else {
+    ReactDOM.render(node, outlet);
+  }
 };