diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
index f77d6c65d44a8..0dcb81ca21000 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -2,9 +2,11 @@
// This test harness mounts each test app as a separate root to test multi-root applications.
+import semver from 'semver';
+
import {createElement} from 'react';
import {createRoot} from 'react-dom/client';
-import {render, unmountComponentAtNode} from 'react-dom';
+
import DeeplyNestedComponents from './DeeplyNestedComponents';
import Iframe from './Iframe';
import EditableProps from './EditableProps';
@@ -67,6 +69,8 @@ function mountStrictApp(App) {
}
function mountLegacyApp(App: () => React$Node) {
+ const {render, unmountComponentAtNode} = require('react-dom');
+
function LegacyRender() {
return createElement(App);
}
@@ -78,6 +82,10 @@ function mountLegacyApp(App: () => React$Node) {
unmountFunctions.push(() => unmountComponentAtNode(container));
}
+const shouldRenderLegacy = semver.lte(
+ process.env.E2E_APP_REACT_VERSION,
+ '18.2.0',
+);
function mountTestApp() {
mountStrictApp(ToDoList);
mountApp(InspectableElements);
@@ -90,7 +98,10 @@ function mountTestApp() {
mountApp(SuspenseTree);
mountApp(DeeplyNestedComponents);
mountApp(Iframe);
- mountLegacyApp(PartiallyStrictApp);
+
+ if (shouldRenderLegacy) {
+ mountLegacyApp(PartiallyStrictApp);
+ }
}
function unmountTestApp() {
diff --git a/packages/react-devtools-shell/src/multi/left.js b/packages/react-devtools-shell/src/multi/left.js
index b195361f959fd..d4cddabdc1629 100644
--- a/packages/react-devtools-shell/src/multi/left.js
+++ b/packages/react-devtools-shell/src/multi/left.js
@@ -7,7 +7,7 @@
import * as React from 'react';
import {useState} from 'react';
-import {createRoot} from 'react-dom';
+import {createRoot} from 'react-dom/client';
function createContainer() {
const container = document.createElement('div');
diff --git a/packages/react-devtools-shell/src/multi/right.js b/packages/react-devtools-shell/src/multi/right.js
index 1c53c80007b0e..fb7d7cb008065 100644
--- a/packages/react-devtools-shell/src/multi/right.js
+++ b/packages/react-devtools-shell/src/multi/right.js
@@ -7,7 +7,7 @@
import * as React from 'react';
import {useLayoutEffect, useRef, useState} from 'react';
-import {render} from 'react-dom';
+import {createRoot} from 'react-dom/client';
function createContainer() {
const container = document.createElement('div');
@@ -37,4 +37,4 @@ function EffectWithState() {
);
}
-render(, createContainer());
+createRoot(createContainer()).render();
diff --git a/packages/react-devtools-shell/webpack-server.js b/packages/react-devtools-shell/webpack-server.js
index 3d2597b6137f3..fb28270964fa2 100644
--- a/packages/react-devtools-shell/webpack-server.js
+++ b/packages/react-devtools-shell/webpack-server.js
@@ -1,7 +1,6 @@
const {resolve} = require('path');
const Webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
-const fs = require('fs');
const {
DARK_MODE_DIMMED_WARNING_COLOR,
DARK_MODE_DIMMED_ERROR_COLOR,
@@ -17,10 +16,7 @@ const semver = require('semver');
const {SUCCESSFUL_COMPILATION_MESSAGE} = require('./constants');
-const ReactVersionSrc = fs.readFileSync(require.resolve('shared/ReactVersion'));
-const currentReactVersion = /export default '([^']+)';/.exec(
- ReactVersionSrc,
-)[1];
+const {ReactVersion: currentReactVersion} = require('../../ReactVersions');
const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {