cli: install both v16 and v17 of @hot-loader/react-dom

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/poor-hounds-beam.md

@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+The CLI now bundles both version 16 and 17 of the patched `@hot-loader/react-dom` dependency, and selects the appropriate one based on what version of `react-dom` is installed within the app.

packages/cli/package.json

@@ -37,7 +37,8 @@
     "@backstage/errors": "^0.2.2",
     "@backstage/release-manifests": "^0.0.2",
     "@backstage/types": "^0.1.3",
-    "@hot-loader/react-dom": "^17.0.2",
+    "@hot-loader/react-dom-v16": "npm:@hot-loader/react-dom@^16.0.2",
+    "@hot-loader/react-dom-v17": "npm:@hot-loader/react-dom@^17.0.2",
     "@manypkg/get-packages": "^1.1.3",
     "@octokit/request": "^5.4.12",
     "@rollup/plugin-commonjs": "^21.0.1",

packages/cli/src/lib/bundler/config.ts

@@ -167,13 +167,16 @@ export async function createConfig(
     }),
   );
 
+  // Detect and use the appropriate react-dom hot-loader patch based on what
+  // version of React is used within the target repo.
   const resolveAliases: Record<string, string> = {};
   try {
     // eslint-disable-next-line import/no-extraneous-dependencies
     const { version: reactDomVersion } = require('react-dom/package.json');
-    // Only apply the alias for hook support if we're running with React 16
     if (reactDomVersion.startsWith('16.')) {
-      resolveAliases['react-dom'] = '@hot-loader/react-dom';
+      resolveAliases['react-dom'] = '@hot-loader/react-dom-v16';
+    } else {
+      resolveAliases['react-dom'] = '@hot-loader/react-dom-v17';
     }
   } catch (error) {
     console.warn(`WARNING: Failed to read react-dom version, ${error}`);

yarn.lock

@@ -2557,7 +2557,17 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@hot-loader/react-dom@^17.0.2":
+"@hot-loader/react-dom-v16@npm:@hot-loader/react-dom@^16.0.2":
+  version "16.14.0"
+  resolved "https://registry.npmjs.org/@hot-loader/react-dom/-/react-dom-16.14.0.tgz#3cfc64e40bb78fa623e59b582b8f09dcdaad648a"
+  integrity sha512-EN9czvcLsMYmSDo5yRKZOAq3ZGRlDpad1gPtX0NdMMomJXcPE3yFSeFzE94X/NjOaiSVimB7LuqPYpkWVaIi4Q==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.19.1"
+
+"@hot-loader/react-dom-v17@npm:@hot-loader/react-dom@^17.0.2":
   version "17.0.2"
   resolved "https://registry.npmjs.org/@hot-loader/react-dom/-/react-dom-17.0.2.tgz#0b24e484093e8f97eb5c72bebdda44fc20bc8400"
   integrity sha512-G2RZrFhsQClS+bdDh/Ojpk3SgocLPUGnvnJDTQYnmKSSwXtU+Yh+8QMs+Ia3zaAvBiOSpIIDSUxuN69cvKqrWg==