From f2fe4d240bf4dc14789928db71a685c721c6aa8a Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Wed, 19 Jan 2022 19:11:04 +0100
Subject: [PATCH] cli: only apply hot loader hook support alias for react 16

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/lucky-lemons-serve.md       |  5 +++++
 .changeset/nice-lobsters-tie.md        |  2 +-
 packages/cli/src/lib/bundler/config.ts | 16 +++++++++++++---
 3 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/lucky-lemons-serve.md

diff --git a/.changeset/lucky-lemons-serve.md b/.changeset/lucky-lemons-serve.md
new file mode 100644
index 0000000000..254b63cc1f
--- /dev/null
+++ b/.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.
diff --git a/.changeset/nice-lobsters-tie.md b/.changeset/nice-lobsters-tie.md
index b531255023..cfe5ff07e8 100644
--- a/.changeset/nice-lobsters-tie.md
+++ b/.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",
diff --git a/packages/cli/src/lib/bundler/config.ts b/packages/cli/src/lib/bundler/config.ts
index 35c5be8bb7..f4810722bc 100644
--- a/packages/cli/src/lib/bundler/config.ts
+++ b/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,