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(<EffectWithState />, createContainer()); +createRoot(createContainer()).render(<EffectWithState />); 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) {