cli: only apply hot loader hook support alias for react 16

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

.changeset/lucky-lemons-serve.md

@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+Switched to only apply `@hot-loader/react-dom` [Webpack aliasing](https://github.com/hot-loader/react-dom/tree/master/source#webpack) when using React 16.

.changeset/nice-lobsters-tie.md

@@ -4,7 +4,7 @@
 
 Migrated the app template to React 17.
 
-To apply this change to an existing app, make the following change to `packages/app/package.json`:
+To apply this change to an existing app, make sure you have updated to the latest version of `@backstage/cli`, and make the following change to `packages/app/package.json`:
 
 ```diff
      "history": "^5.0.0",

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

@@ -173,6 +173,18 @@ export async function createConfig(
     }),
   );
 
+  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';
+    }
+  } catch (error) {
+    console.warn(`WARNING: Failed to read react-dom version, ${error}`);
+  }
+
   return {
     mode: isDev ? 'development' : 'production',
     profile: false,
@@ -211,9 +223,7 @@ export async function createConfig(
           [paths.targetPackageJson],
         ),
       ],
-      alias: {
-        'react-dom': '@hot-loader/react-dom',
-      },
+      alias: resolveAliases,
     },
     module: {
       rules: loaders,