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 = {}; + 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,