Clean up REACT_18=true variable (#213246)

## Summary Clean up `REACT_18=true` variable post [react@18 upgrade](#209337) Should also address issue reported in slack > error https://registry.yarnpkg.com/react/-/react-18.2.0.tgz: Integrity check failed for "react" [...] --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
elastic · Mar 5, 2025 · e676a63 · e676a63
1 parent af147b5
commit e676a63
Show file tree

Hide file tree

Showing 14 changed files with 22 additions and 92 deletions.
diff --git a/package.json b/package.json
@@ -1225,10 +1225,8 @@
     "re-resizable": "^6.9.9",
     "re2js": "0.4.3",
     "react": "~18.2.0",
-    "react-18": "npm:react@~18.2.0",
     "react-diff-view": "^3.2.1",
     "react-dom": "~18.2.0",
-    "react-dom-18": "npm:react-dom@~18.2.0",
     "react-dropzone": "^11.7.1",
     "react-fast-compare": "^2.0.4",
     "react-hook-form": "^7.44.2",

diff --git a/packages/kbn-optimizer/src/common/worker_config.ts b/packages/kbn-optimizer/src/common/worker_config.ts
@@ -21,7 +21,6 @@ export interface WorkerConfig {
   readonly profileWebpack: boolean;
   readonly browserslistEnv: string;
   readonly optimizerCacheKey: unknown;
-  readonly reactVersion: string;
 }
 
 export type CacheableWorkerConfig = Omit<WorkerConfig, 'watch' | 'profileWebpack' | 'cache'>;
@@ -73,11 +72,6 @@ export function parseWorkerConfig(json: string): WorkerConfig {
       throw new Error('`browserslistEnv` must be a string');
     }
 
-    const reactVersion = parsed.reactVersion;
-    if (typeof reactVersion !== 'string') {
-      throw new Error('`reactVersion` must be a string');
-    }
-
     const themes = parseThemeTags(parsed.themeTags);
 
     return {
@@ -89,7 +83,6 @@ export function parseWorkerConfig(json: string): WorkerConfig {
       optimizerCacheKey,
       browserslistEnv,
       themeTags: themes,
-      reactVersion,
     };
   } catch (error) {
     throw new Error(`unable to parse worker config: ${error.message}`);

diff --git a/packages/kbn-optimizer/src/optimizer/optimizer_cache_key.test.ts b/packages/kbn-optimizer/src/optimizer/optimizer_cache_key.test.ts
@@ -88,7 +88,6 @@ describe('getOptimizerCacheKey()', () => {
           "browserslistEnv": "dev",
           "dist": false,
           "optimizerCacheKey": "♻",
-          "reactVersion": "17",
           "repoRoot": <absolute path>,
           "themeTags": Array [
             "borealislight",

diff --git a/packages/kbn-optimizer/src/optimizer/optimizer_config.test.ts b/packages/kbn-optimizer/src/optimizer/optimizer_config.test.ts
@@ -128,7 +128,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -157,7 +156,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -186,7 +184,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -214,7 +211,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -243,7 +239,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -272,7 +267,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -301,7 +295,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -331,7 +324,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -361,7 +353,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -424,7 +415,6 @@ describe('OptimizerConfig::create()', () => {
         focus: [],
         includeCoreBundle: false,
         pluginSelector: Symbol('plugin selector'),
-        reactVersion: 17,
       })
     );
   });
@@ -448,7 +438,6 @@ describe('OptimizerConfig::create()', () => {
           Symbol(plugin2),
         ],
         "profileWebpack": Symbol(parsed profile webpack),
-        "reactVersion": 17,
         "repoRoot": Symbol(parsed repo root),
         "themeTags": Symbol(theme tags),
         "watch": Symbol(parsed watch),

diff --git a/packages/kbn-optimizer/src/optimizer/optimizer_config.ts b/packages/kbn-optimizer/src/optimizer/optimizer_config.ts
@@ -163,7 +163,6 @@ export interface ParsedOptions {
   includeCoreBundle: boolean;
   themeTags: ThemeTags;
   pluginSelector: PluginSelector;
-  reactVersion: string;
 }
 
 export class OptimizerConfig {
@@ -178,7 +177,6 @@ export class OptimizerConfig {
     const includeCoreBundle = !!options.includeCoreBundle;
     const filters = options.filter || [];
     const focus = options.focus || [];
-    const reactVersion = process.env.REACT_18 ? '18' : '17';
 
     const repoRoot = options.repoRoot;
     if (!Path.isAbsolute(repoRoot)) {
@@ -223,7 +221,6 @@ export class OptimizerConfig {
       outputRoot,
       maxWorkerCount,
       profileWebpack,
-      reactVersion,
       cache,
       filters,
       focus,
@@ -281,8 +278,7 @@ export class OptimizerConfig {
       options.maxWorkerCount,
       options.dist,
       options.profileWebpack,
-      options.themeTags,
-      options.reactVersion
+      options.themeTags
     );
   }
 
@@ -297,8 +293,7 @@ export class OptimizerConfig {
     public readonly maxWorkerCount: number,
     public readonly dist: boolean,
     public readonly profileWebpack: boolean,
-    public readonly themeTags: ThemeTags,
-    public readonly reactVersion: string
+    public readonly themeTags: ThemeTags
   ) {}
 
   getWorkerConfig(optimizerCacheKey: unknown): WorkerConfig {
@@ -311,7 +306,6 @@ export class OptimizerConfig {
       optimizerCacheKey,
       themeTags: this.themeTags,
       browserslistEnv: this.dist ? 'production' : process.env.BROWSERSLIST_ENV || 'dev',
-      reactVersion: this.reactVersion,
     };
   }
 

diff --git a/packages/kbn-optimizer/src/worker/webpack.config.ts b/packages/kbn-optimizer/src/worker/webpack.config.ts
@@ -293,10 +293,8 @@ export function getWebpackConfig(
           'src/core/public/styles/core_app/images'
         ),
         vega: Path.resolve(worker.repoRoot, 'node_modules/vega/build-es5/vega.js'),
-        'react-dom$':
-          worker.reactVersion === '18' ? 'react-dom-18/profiling' : 'react-dom/profiling',
+        'react-dom$': 'react-dom/profiling',
         'scheduler/tracing': 'scheduler/tracing-profiling',
-        react: worker.reactVersion === '18' ? 'react-18' : 'react',
       },
     },
 

diff --git a/packages/kbn-plugin-helpers/src/tasks/bazel_packages.ts b/packages/kbn-plugin-helpers/src/tasks/bazel_packages.ts
@@ -13,7 +13,7 @@ import { TaskContext } from '../task_context';
 export async function buildBazelPackages({ log, dist }: TaskContext) {
   log.info('run bazel and build required artifacts for the optimizer');
 
-  const args = [`--define=REACT_18=${Boolean(process.env.REACT_18)}`];
+  const args = [];
   if (dist) args.push('--define=dist=true');
   try {
     await runBazel(

diff --git a/renovate.json b/renovate.json
@@ -318,25 +318,6 @@
       ],
       "enabled": true
     },
-    {
-      "groupName": "@elastic/appex-sharedux react-18 dependencies",
-      "matchDepNames": [
-        "react-18",
-        "react-dom-18"
-      ],
-      "reviewers": [
-        "team:appex-sharedux"
-      ],
-      "matchBaseBranches": [
-        "main"
-      ],
-      "labels": [
-        "Team:SharedUX",
-        "release_note:skip",
-        "backport:all-open"
-      ],
-      "enabled": true
-    },
     {
       "groupName": "react-markdown",
       "matchDepNames": [

diff --git a/src/platform/packages/private/kbn-ui-shared-deps-npm/BUILD.bazel b/src/platform/packages/private/kbn-ui-shared-deps-npm/BUILD.bazel
@@ -55,12 +55,10 @@ RUNTIME_DEPS = [
   "@npm//moment-timezone",
   "@npm//node-libs-browser",
   "@npm//react-dom",
-  "@npm//react-dom-18",
   "@npm//react-router-dom",
   "@npm//react-router-dom-v5-compat",
   "@npm//react-router",
   "@npm//react",
-  "@npm//react-18",
   "@npm//rxjs",
   "@npm//styled-components",
   "@npm//tslib",
@@ -100,7 +98,6 @@ webpack_cli(
     },
     "//conditions:default": {
       "NODE_ENV": "development",
-      "REACT_18": "$(REACT_18)",
     },
   })
 )

diff --git a/src/platform/packages/private/kbn-ui-shared-deps-npm/webpack.config.js b/src/platform/packages/private/kbn-ui-shared-deps-npm/webpack.config.js
@@ -140,10 +140,8 @@ module.exports = (_, argv) => {
         moment: MOMENT_SRC,
         // NOTE: Used to include react profiling on bundles
         // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#webpack-4
-        'react-dom$':
-          process.env.REACT_18 === 'true' ? 'react-dom-18/profiling' : 'react-dom/profiling',
+        'react-dom$': 'react-dom/profiling',
         'scheduler/tracing': 'scheduler/tracing-profiling',
-        react: process.env.REACT_18 === 'true' ? 'react-18' : 'react',
       },
       extensions: ['.js', '.ts'],
       mainFields: ['browser', 'module', 'main'],

diff --git a/src/platform/packages/private/kbn-ui-shared-deps-src/BUILD.bazel b/src/platform/packages/private/kbn-ui-shared-deps-src/BUILD.bazel
@@ -58,8 +58,7 @@ webpack_cli(
       "NODE_ENV": "production",
     },
     "//conditions:default": {
-      "NODE_ENV": "development",
-      "REACT_18": "$(REACT_18)",
+      "NODE_ENV": "development"
     },
   }),
   visibility = ["//visibility:public"],

diff --git a/src/platform/packages/private/kbn-ui-shared-deps-src/webpack.config.js b/src/platform/packages/private/kbn-ui-shared-deps-src/webpack.config.js
@@ -118,10 +118,8 @@ module.exports = {
       moment: MOMENT_SRC,
       // NOTE: Used to include react profiling on bundles
       // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#webpack-4
-      'react-dom$':
-        process.env.REACT_18 === 'true' ? 'react-dom-18/profiling' : 'react-dom/profiling',
+      'react-dom$': 'react-dom/profiling',
       'scheduler/tracing': 'scheduler/tracing-profiling',
-      react: process.env.REACT_18 === 'true' ? 'react-18' : 'react',
     },
   },
 

diff --git a/src/platform/packages/shared/kbn-test/src/jest/resolver.js b/src/platform/packages/shared/kbn-test/src/jest/resolver.js
@@ -30,8 +30,6 @@ const STATIC_FILE_EXT =
     .split('|')
     .map((e) => `.${e}`);
 
-const IS_REACT_18 = process.env.REACT_18 === 'true';
-
 /**
  * @param {string} str
  * @returns
@@ -83,18 +81,6 @@ module.exports = (request, options) => {
     return APM_AGENT_MOCK;
   }
 
-  // routes tests to the react-18 alias package
-  if (IS_REACT_18) {
-    // routes tests to the react-18 alias package
-    if (/^react?(\/[\s\S]*)?$/.test(request)) {
-      return module.exports(request.replace('react', 'react-18'), options);
-    }
-
-    if (/^react-dom?(\/[\s\S]*)?$/.test(request)) {
-      return module.exports(request.replace('react-dom', 'react-dom-18'), options);
-    }
-  }
-
   const reqExt = Path.extname(request);
   if (reqExt) {
     const pRequest = parseRequestOrExtSuffix(request);

diff --git a/yarn.lock b/yarn.lock
@@ -28121,13 +28121,6 @@ re2js@0.4.3:
   resolved "https://registry.yarnpkg.com/re2js/-/re2js-0.4.3.tgz#1318cd0c12aa6ed3ba56d5e012311ffbfb2aef35"
   integrity sha512-EuNmh7jurhHEE8Ge/lBo9JuMLb3qf866Xjjfyovw3wPc7+hlqDkZq4LwhrCQMEI+ARWfrKrHozEndzlpNT0WDg==
 
-"react-18@npm:react@~18.2.0", react@~18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
 react-clientside-effect@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a"
@@ -28171,21 +28164,21 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-"react-dom-18@npm:react-dom@~18.2.0", react-dom@~18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.0"
-
 "react-dom@^17.0.0 || ^18.2.0 || ^19.0.0":
   version "19.0.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0.tgz#43446f1f01c65a4cd7f7588083e686a6726cfb57"
   integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
   dependencies:
     scheduler "^0.25.0"
 
+react-dom@~18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
 react-dropzone@^11.7.1:
   version "11.7.1"
   resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.7.1.tgz#3851bb75b26af0bf1b17ce1449fd980e643b9356"
@@ -28635,6 +28628,13 @@ react-window@^1.8.10:
   resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
   integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
 
+react@~18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 read-installed@~4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/read-installed/-/read-installed-4.0.3.tgz#ff9b8b67f187d1e4c29b9feb31f6b223acd19067"