build(frontend): upgrade rsbuild to 2.2.1

frontend/package.json

@@ -114,7 +114,6 @@
     "pretty-bytes": "^5.6.0",
     "pretty-ms": "^7.0.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": "^19.2.0",
@@ -144,14 +143,13 @@
     "@module-federation/rsbuild-plugin": "^2.5.1",
     "@playwright/test": "^1.62.0",
     "@rollup/plugin-yaml": "^4.1.2",
-    "@rsbuild/core": "2.0.11",
-    "@rsbuild/plugin-babel": "1.2.1",
+    "@rsbuild/core": "2.2.1",
     "@rsbuild/plugin-node-polyfill": "1.4.6",
-    "@rsbuild/plugin-react": "2.0.1",
-    "@rsbuild/plugin-sass": "1.5.3",
-    "@rsbuild/plugin-svgr": "2.0.3",
-    "@rsbuild/plugin-tailwindcss": "2.0.2",
-    "@rsbuild/plugin-yaml": "1.0.5",
+    "@rsbuild/plugin-react": "2.1.0",
+    "@rsbuild/plugin-sass": "2.0.1",
+    "@rsbuild/plugin-svgr": "2.0.5",
+    "@rsbuild/plugin-tailwindcss": "2.0.3",
+    "@rsbuild/plugin-yaml": "2.0.0",
     "@rsdoctor/rspack-plugin": "1.6.0",
     "@tanstack/react-query-devtools": "^5.90.2",
     "@tanstack/react-router-devtools": "^1.167.0",
@@ -170,7 +168,6 @@
     "@vitejs/plugin-react": "^5.1.2",
     "@vitest/coverage-v8": "^4.1.10",
     "@vitest/ui": "^4.1.10",
-    "babel-plugin-react-compiler": "^1.0.0",
     "baseline-browser-mapping": "2.10.33",
     "happy-dom": "^20.11.1",
     "lefthook": "^2.0.12",

frontend/rsbuild.config.ts

@@ -1,6 +1,7 @@
+// Copyright 2026 Redpanda Data, Inc.
+
 import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
 import { defineConfig, loadEnv } from '@rsbuild/core';
-import { pluginBabel } from '@rsbuild/plugin-babel';
 import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { pluginSass } from '@rsbuild/plugin-sass';
@@ -27,36 +28,15 @@ export default defineConfig({
       reactRefreshOptions: {
         forceEnable: true,
       },
-    }),
-    pluginBabel({
-      include: /\.(?:ts|tsx)$/,
-      babelLoaderOptions(opts) {
-        opts.plugins ??= [];
-        opts.plugins.unshift([
-          'babel-plugin-react-compiler',
-          {
-            target: '19',
-            compilationMode: 'annotation',
-            panicThreshold: 'critical_errors',
-            // In annotation mode, this still gates which files CAN be opted in.
-            // Files excluded here are ineligible even with 'use memo'.
-            sources: (filename: string) => {
-              if (filename.includes('/lib/redpanda-ui/')) {
-                return false;
-              }
-              if (filename.includes('/gen/')) {
-                return false;
-              }
-              if (filename.includes('node_modules')) {
-                return false;
-              }
-              return true;
-            },
-          },
-        ]);
+      // Rspack's Rust implementation avoids the extra Babel transform while
+      // preserving the existing opt-in React Compiler behavior.
+      reactCompiler: {
+        target: '19',
+        compilationMode: 'annotation',
+        panicThreshold: 'critical_errors',
       },
     }),
-    pluginSvgr({ mixedImport: true }),
+    pluginSvgr({ mixedImport: true, parallel: true }),
     pluginSass(),
     pluginTailwindcss(),
     pluginYaml(),
@@ -131,18 +111,43 @@ export default defineConfig({
     // production diagnostics.
     removeConsole: ['log', 'warn'],
   },
+  splitChunks: {
+    preset: 'default',
+    chunks: 'all',
+    // A 4 MiB cap cut the largest async chunk from 10.06 MB to 5.65 MB
+    // while adding 13 requests; 512 KiB added 127 with no further reduction.
+    maxAsyncSize: 4 * 1024 * 1024,
+    cacheGroups: {
+      legacyUi: {
+        test: /[\\/]node_modules[\\/]@redpanda-data[\\/]ui[\\/]/,
+        name: 'lib-redpanda-ui',
+        priority: 40,
+        enforce: true,
+        reuseExistingChunk: true,
+      },
+      monaco: {
+        test: /[\\/]node_modules[\\/]monaco-editor[\\/]/,
+        name: 'lib-monaco-editor',
+        priority: 30,
+        enforce: true,
+        reuseExistingChunk: true,
+      },
+    },
+  },
   output: {
     distPath: {
       root: 'build',
     },
   },
   tools: {
-    rspack: (config, { appendPlugins }) => {
+    rspack: (config, { appendPlugins, isProd }) => {
       config.lazyCompilation = false;
       config.experiments = {
         ...config.experiments,
-        lazyBarrel: false,
+        asyncWebAssembly: true,
+        futureDefaults: true,
         nativeWatcher: true,
+        pureFunctions: isProd,
       };
       config.resolve ||= {};
       config.resolve.alias ||= {};

frontend/tests/rsbuild-config.integration.test.ts

@@ -0,0 +1,33 @@
+// Copyright 2026 Redpanda Data, Inc.
+import { createRsbuild } from '@rsbuild/core';
+import { describe, expect, test } from 'vitest';
+
+import rsbuildConfig from '../rsbuild.config';
+
+describe('Rsbuild production config', () => {
+  test('uses the optimized compiler and chunking pipeline', async () => {
+    const rsbuild = await createRsbuild({
+      config: rsbuildConfig,
+      cwd: process.cwd(),
+    });
+    const { origin } = await rsbuild.inspectConfig({ mode: 'production' });
+    const [rspackConfig] = origin.bundlerConfigs;
+    const serializedConfig = JSON.stringify(rspackConfig);
+
+    expect(rspackConfig?.experiments).toMatchObject({
+      asyncWebAssembly: true,
+      futureDefaults: true,
+      nativeWatcher: true,
+      pureFunctions: true,
+      sourceImport: true,
+    });
+    expect(rspackConfig?.experiments).not.toHaveProperty('fasterModuleConcatenation');
+    expect(rspackConfig?.optimization?.splitChunks).toMatchObject({
+      chunks: 'all',
+      maxAsyncSize: 4 * 1024 * 1024,
+    });
+    expect(serializedConfig).toContain('reactCompiler');
+    expect(serializedConfig).not.toContain('babel-loader');
+    expect(serializedConfig).toContain('"parallel":true');
+  });
+});

frontend/vitest.config.integration.mts

@@ -39,7 +39,7 @@ export default defineConfig(({ mode }) => {
       testTimeout: 30_000,
       globals: true,
       environment: 'happy-dom', // Aligns with cloud-ui / adp-ui; required to run Chakra + Radix integration tests consistently
-      include: ['src/**/*.test.tsx'], // Only .test.tsx files (integration tests)
+      include: ['src/**/*.test.tsx', 'tests/**/*.integration.test.ts'],
       setupFiles: './vitest.setup.integration.ts',
       deps: {
         registerNodeLoader: true,

frontend/vitest.config.unit.mts

@@ -15,10 +15,13 @@ export default defineConfig(({ mode }) => {
     experimental: { fsModuleCache: true },
     test: {
       fileParallelism: true,
+      isolate: false,
+      pool: 'threads',
       testTimeout: 30_000,
       globals: true,
       environment: 'node', // Unit tests use node environment
       include: ['src/**/*.test.ts', 'tests/**/*.test.ts'], // Pure unit tests, including test-harness contracts
+      exclude: ['tests/**/*.integration.test.ts'],
       setupFiles: './vitest.setup.unit.ts',
       reporters: ['default', ...(process.env.CI ? ['github-actions' as const] : [])],
       coverage: {