feat(frontend): migrate to React 19 via Module Federation bridge (#2525)

Upgrade Console's frontend from React 18.3.1 to React 19.2.x while keeping
Module Federation working with the React-18 Cloud UI host via
@module-federation/bridge-react.

- shared: {} so the bridge isolates Console's own React 19
- ./BridgeApp expose (createBridgeComponent from /v19); ./App becomes a
  React-18-safe legacy shim so the current Cloud UI keeps working with no
  host change
- react-beautiful-dnd -> @hello-pangea/dnd (react-redux 7's
  unstable_batchedUpdates is removed in React 19)
- framer-motion@7 -> motion/react (React 19 compatible)
- build shims: react-onclickoutside (findDOMNode) and a react-router-dom
  alias override to neutralize bridge-react's router hijack
- restore the global JSX namespace for @redpanda-data/ui's bundled
  react-markdown@8
- React 19 type fixes via types-react-codemod (scoped JSX, useRef, RefObject)
- pin memoize-one to a typed version (removing react-beautiful-dnd re-hoisted
  an untyped memoize-one@4)

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: malinskibeniamin

frontend/bun.lock

@@ -11,8 +11,6 @@
 
 import type { ModuleFederationPluginOptions } from '@module-federation/rsbuild-plugin';
 
-const deps: Record<string, string> = (await import('./package.json', { with: { type: 'json' } })).default.dependencies;
-
 export const moduleFederationConfig: ModuleFederationPluginOptions = {
   name: 'rp_console',
   // IMPORTANT: Keep as 'embedded.js' for backward compatibility with existing Cloud UI
@@ -22,8 +20,17 @@ export const moduleFederationConfig: ModuleFederationPluginOptions = {
   },
 
   exposes: {
-    // V2: New component pattern for Cloud UI MF v2.0 integration
-    './App': './src/federation/console-app.tsx',
+    // './App' is a React 18-safe compatibility shim. Console runs React 19, but
+    // the current Cloud UI host (React 18) still loads 'rp_console/App' and
+    // renders it as a plain element. The shim returns a React 18 element shape
+    // whose ref mounts the real React 19 app via Console's own createRoot, so
+    // the existing host keeps working with no Cloud UI change. New Cloud UI
+    // hosts consume './BridgeApp' instead.
+    './App': './src/federation/console-legacy-app.tsx',
+    // React bridge entry consumed by Cloud UI. Mounts the app with Console's own
+    // React 19 createRoot into a host-provided DOM node, decoupling it from the
+    // host's React 18. See src/federation/console-federated-bridge.tsx.
+    './BridgeApp': './src/federation/console-federated-bridge.tsx',
     './types': './src/federation/types.ts',
 
     // Legacy: Keep for backward compat with old Cloud UI
@@ -33,63 +40,12 @@ export const moduleFederationConfig: ModuleFederationPluginOptions = {
     './config': './src/config.ts',
   },
 
-  shared: {
-    react: {
-      singleton: true,
-      requiredVersion: deps.react,
-      eager: false,
-    },
-    'react-dom': {
-      singleton: true,
-      requiredVersion: deps['react-dom'],
-      eager: false,
-    },
-    '@redpanda-data/ui': {
-      import: '@redpanda-data/ui',
-    },
-    '@tanstack/react-query': {
-      singleton: true,
-      requiredVersion: deps['@tanstack/react-query'],
-      eager: false,
-    },
-    '@tanstack/react-router': {
-      singleton: true,
-      requiredVersion: deps['@tanstack/react-router'],
-      eager: false,
-    },
-    'react-hook-form': {
-      singleton: true,
-      requiredVersion: deps['react-hook-form'],
-    },
-    '@hookform/resolvers': {
-      singleton: true,
-      requiredVersion: deps['@hookform/resolvers'],
-    },
-    zod: {
-      singleton: true,
-      requiredVersion: deps.zod,
-    },
-    // lucide-react is intentionally NOT shared. It is stateless SVG components
-    // (no context/hooks), so it has no singleton requirement. Sharing it as a
-    // singleton forced the whole package (~1.5 MiB / 1700+ icons) into a shared
-    // chunk regardless of which icons are used; unshared, this remote tree-shakes
-    // to only the icons it imports and can upgrade lucide independently of the
-    // cloud-ui host. The host and the adp-ui remote unshare it too.
-    'class-variance-authority': {
-      singleton: false,
-      requiredVersion: deps['class-variance-authority'],
-    },
-    'tailwind-merge': {
-      singleton: false,
-      requiredVersion: deps['tailwind-merge'],
-    },
-    motion: {
-      singleton: false,
-      requiredVersion: deps.motion,
-    },
-    clsx: {
-      singleton: false,
-      requiredVersion: deps.clsx,
-    },
-  },
+  // Nothing is shared. Console runs React 19 while Cloud UI stays on React 18; a
+  // shared React singleton cannot span both majors. The React bridge
+  // ('./BridgeApp') isolates Console's React 19 along with its own
+  // @tanstack/react-query, @tanstack/react-router, react-hook-form and the rest,
+  // so each app bundles its own copies and no cross-major React conflict can
+  // occur in the embedded scene. (lucide-react was never shared either —
+  // stateless SVGs with no singleton requirement.)
+  shared: {},
 };

frontend/module-federation.config.ts

@@ -70,12 +70,14 @@
     "@connectrpc/connect-query": "^2.2.0",
     "@connectrpc/connect-web": "^2.1.0",
     "@emotion/css": "^11.13.5",
+    "@hello-pangea/dnd": "^18.0.1",
     "@hookform/resolvers": "^5.2.2",
     "@icons-pack/react-simple-icons": "^13.8.0",
     "@lezer/highlight": "^1.2.3",
     "@milkdown/kit": "^7.18.0",
     "@milkdown/react": "^7.18.0",
     "@modelcontextprotocol/sdk": "^1.29.0",
+    "@module-federation/bridge-react": "2.5.1",
     "@module-federation/runtime": "^2.5.1",
     "@monaco-editor/react": "^4.7.0",
     "@redpanda-data/ui": "^4.2.0",
@@ -101,7 +103,6 @@
     "dexie": "^4.2.1",
     "dotenv": "^17.2.3",
     "es-cookie": "^1.5.0",
-    "framer-motion": "^7.10.3",
     "hast": "^1.0.0",
     "hast-util-to-jsx-runtime": "^2.3.6",
     "js-base64": "^3.7.8",
@@ -117,12 +118,11 @@
     "pretty-bytes": "^5.6.0",
     "pretty-ms": "^7.0.1",
     "prismjs": "^1.30.0",
-    "react": "^18.3.1",
-    "react-beautiful-dnd": "^13.1.1",
+    "react": "^19.2.0",
     "react-compiler-runtime": "^1.0.0",
     "react-data-grid": "7.0.0-beta.47",
     "react-day-picker": "^9.14.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.2.0",
     "react-dropzone": "^15.0.0",
     "react-highlight-words": "^0.21.0",
     "react-hook-form": "^7.76.1",
@@ -173,9 +173,8 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/json-bigint": "^1.0.4",
     "@types/node": "^22.19.1",
-    "@types/react": "^18.3.26",
-    "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.2",
     "@types/react-highlight-words": "^0.20.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript/native-preview": "^7.0.0-dev.20260108.1",
@@ -204,10 +203,12 @@
   "overrides": {
     "dompurify": "^3.4.0",
     "prismjs": "^1.30.0",
-    "baseline-browser-mapping": "2.10.33"
+    "baseline-browser-mapping": "2.10.33",
+    "memoize-one": "^6.0.0"
   },
   "resolutions": {
-    "baseline-browser-mapping": "2.10.33"
+    "baseline-browser-mapping": "2.10.33",
+    "memoize-one": "^6.0.0"
   },
   "patchedDependencies": {
     "@tanstack/react-router@1.170.15": "patches/@tanstack%2Freact-router@1.170.15.patch"

frontend/package.json

@@ -35,7 +35,7 @@ export default defineConfig({
         opts.plugins.unshift([
           'babel-plugin-react-compiler',
           {
-            target: '18',
+            target: '19',
             compilationMode: 'annotation',
             panicThreshold: 'critical_errors',
             // In annotation mode, this still gates which files CAN be opted in.
@@ -164,9 +164,24 @@ export default defineConfig({
 
       // Stub `date-fns-tz` v2 imports from `@redpanda-data/ui` — see
       // `src/utils/vendor/date-fns-tz-shim.ts` for context.
+      //
+      // react-onclickoutside (transitive via `@redpanda-data/ui`'s react-datepicker)
+      // statically imports `findDOMNode`, which React 19 removed — this breaks the
+      // bundle's ESM linking. Console renders no datepicker, so redirect it to an
+      // identity-HOC shim. See `src/shims/react-onclickoutside-shim.ts`.
+      //
+      // `@module-federation/bridge-react` auto-installs a webpack-plugin that aliases
+      // `react-router-dom$` to its own router shim. Because Console declares no direct
+      // react-router-dom dependency, that plugin falls back to its v6 shim (only
+      // exports BrowserRouter/RouterProvider) and breaks `@redpanda-data/ui`, which
+      // imports NavLink/Link from the real react-router-dom@7. Console does not federate
+      // routing (it uses @tanstack/react-router), so point react-router-dom back at the
+      // real package — the plugin spreads the user alias last, so this override wins.
       Object.assign(config.resolve.alias as Record<string, string>, {
         'date-fns-tz$': path.resolve(__dirname, 'src/utils/vendor/date-fns-tz-shim.ts'),
         'date-fns-tz/zonedTimeToUtc$': path.resolve(__dirname, 'src/utils/vendor/zonedTimeToUtc.ts'),
+        'react-onclickoutside': path.resolve(__dirname, 'src/shims/react-onclickoutside-shim.ts'),
+        'react-router-dom$': path.resolve(__dirname, 'node_modules/react-router-dom'),
       });
 
       config.output.publicPath = 'auto';

frontend/rsbuild.config.ts

@@ -11,7 +11,7 @@
 
 import { Tooltip } from '@redpanda-data/ui';
 import { ChevronRightIcon } from 'components/icons';
-import React, { Component } from 'react';
+import React, { Component, type JSX } from 'react';
 
 import { api, brokerMap } from '../../state/backend-api';
 import type { Broker, Partition } from '../../state/rest-interfaces';

frontend/src/components/misc/broker-list.tsx

@@ -11,7 +11,7 @@
 
 import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@redpanda-data/ui';
 import { AlertIcon } from 'components/icons';
-import React, { type PropsWithChildren, useState } from 'react';
+import React, { type JSX, type PropsWithChildren, useState } from 'react';
 
 import type { TopicLogDirSummary } from '../../state/rest-interfaces';
 import { uiState } from '../../state/ui-state';

frontend/src/components/misc/common.tsx

@@ -12,6 +12,7 @@
 import { Box, DataTable, Flex, Text, Tooltip } from '@redpanda-data/ui';
 import type { ColumnDef } from '@tanstack/react-table';
 import { EyeOffIcon, InfoIcon } from 'components/icons';
+import type { JSX } from 'react';
 
 import styles from './ConfigList.module.scss';
 import colors from '../../colors';

frontend/src/components/misc/config-list.tsx

@@ -9,6 +9,8 @@
  * by the Apache License, Version 2.0
  */
 
+import type { JSX } from 'react';
+
 import styles from './HiddenRadioList.module.scss';
 
 export type HiddenRadioOption<ValueType> = {

frontend/src/components/misc/hidden-radio-list.tsx

@@ -1,5 +1,5 @@
 import { Stack } from '@redpanda-data/ui';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import type { ReactNode } from 'react';
 
 import { animProps } from '../../utils/animation-props';

frontend/src/components/misc/page-content.tsx

@@ -1,4 +1,5 @@
 import { Flex, Text } from '@redpanda-data/ui';
+import type { JSX } from 'react';
 
 export function SmallStat(p: { title: JSX.Element | string; children: JSX.Element | number | string }) {
   return (