diff --git a/.changeset/tiny-crews-pull.md b/.changeset/tiny-crews-pull.md new file mode 100644 index 0000000000..8d499ac5e6 --- /dev/null +++ b/.changeset/tiny-crews-pull.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli': patch +--- + +Deprecated the use of React 16 diff --git a/packages/cli/src/commands/start/startFrontend.ts b/packages/cli/src/commands/start/startFrontend.ts index e066a40e7a..c582f13a5e 100644 --- a/packages/cli/src/commands/start/startFrontend.ts +++ b/packages/cli/src/commands/start/startFrontend.ts @@ -32,6 +32,30 @@ interface StartAppOptions { configPaths: string[]; } +function checkReactVersion() { + try { + // Make sure we're looking at the root of the target repo + const reactPkgPath = require.resolve('react/package.json', { + paths: [paths.targetRoot], + }); + const reactPkg = require(reactPkgPath); + if (reactPkg.version.startsWith('16.')) { + console.log( + chalk.yellow( + ` +⚠️ ⚠️ +⚠️ You are using React version 16, which is deprecated for use in Backstage. ⚠️ +⚠️ Please upgrade to at React 17 by updating your packages/app dependencies. ⚠️ +⚠️ ⚠️ +`, + ), + ); + } + } catch { + /* ignored */ + } +} + export async function startFrontend(options: StartAppOptions) { if (options.verifyVersions) { const lockfile = await Lockfile.load(paths.resolveTargetRoot('yarn.lock')); @@ -65,6 +89,8 @@ export async function startFrontend(options: StartAppOptions) { } } + checkReactVersion(); + const { name } = await fs.readJson(paths.resolveTarget('package.json')); const config = await loadCliConfig({ args: options.configPaths,