From 38cda5274693ed2809060f66672c1f0e2642cf80 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 13 Oct 2023 15:31:05 +0200 Subject: [PATCH] dev-utils,techdocs: add conditional support for React 18 Signed-off-by: Patrik Oldsberg --- .changeset/eleven-hounds-invent.md | 5 +++++ .changeset/shaggy-beers-collect.md | 6 ++++++ packages/dev-utils/src/devApp/render.tsx | 5 +---- .../techdocs/src/reader/transformers/renderReactElement.ts | 5 +---- 4 files changed, 13 insertions(+), 8 deletions(-) create mode 100644 .changeset/eleven-hounds-invent.md create mode 100644 .changeset/shaggy-beers-collect.md diff --git a/.changeset/eleven-hounds-invent.md b/.changeset/eleven-hounds-invent.md new file mode 100644 index 0000000000..ba863ebc28 --- /dev/null +++ b/.changeset/eleven-hounds-invent.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli': patch +--- + +In frontend builds and tests `process.env.HAS_REACT_DOM_CLIENT` will now be defined if `react-dom/client` is present, i.e. if using React 18. This allows for conditional imports of `react-dom/client`. diff --git a/.changeset/shaggy-beers-collect.md b/.changeset/shaggy-beers-collect.md new file mode 100644 index 0000000000..471368d6f2 --- /dev/null +++ b/.changeset/shaggy-beers-collect.md @@ -0,0 +1,6 @@ +--- +'@backstage/dev-utils': patch +'@backstage/plugin-techdocs': patch +--- + +Added support for React 18. The new `createRoot` API from `react-dom/client` will now be used if present. diff --git a/packages/dev-utils/src/devApp/render.tsx b/packages/dev-utils/src/devApp/render.tsx index 335308ff5e..e45ba649f9 100644 --- a/packages/dev-utils/src/devApp/render.tsx +++ b/packages/dev-utils/src/devApp/render.tsx @@ -49,10 +49,7 @@ import { createRoutesFromChildren, Route } from 'react-router-dom'; import { SidebarThemeSwitcher } from './SidebarThemeSwitcher'; import 'react-dom'; -let ReactDOM: - | typeof import('react-dom') - // TODO: replace with import('react-dom/client') when repo is migrated to 18 - | { createRoot(el: HTMLElement): { render(el: JSX.Element): void } }; +let ReactDOM: typeof import('react-dom') | typeof import('react-dom/client'); if (process.env.HAS_REACT_DOM_CLIENT) { ReactDOM = require('react-dom/client'); } else { diff --git a/plugins/techdocs/src/reader/transformers/renderReactElement.ts b/plugins/techdocs/src/reader/transformers/renderReactElement.ts index 86d44532c5..f9b45065f1 100644 --- a/plugins/techdocs/src/reader/transformers/renderReactElement.ts +++ b/plugins/techdocs/src/reader/transformers/renderReactElement.ts @@ -14,10 +14,7 @@ * limitations under the License. */ -let ReactDOM: - | typeof import('react-dom') - // TODO: replace with import('react-dom/client') when repo is migrated to 18 - | { createRoot(el: HTMLElement): { render(el: JSX.Element): void } }; +let ReactDOM: typeof import('react-dom') | typeof import('react-dom/client'); if (process.env.HAS_REACT_DOM_CLIENT) { ReactDOM = require('react-dom/client'); } else {