diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index ab3250d7cff7a..689052f2d1cb4 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -11,9 +11,10 @@ import {createElement} from 'react'; import { // $FlowFixMe Flow does not yet know about flushSync() flushSync, - // $FlowFixMe Flow does not yet know about createRoot() +} from 'react-dom/client'; +import { createRoot, -} from 'react-dom'; +} from 'react-dom/client'; import Bridge from 'react-devtools-shared/src/bridge'; import Store from 'react-devtools-shared/src/devtools/store'; import { diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js index 234d638353f43..71f302e2bd25e 100644 --- a/packages/react-devtools-core/webpack.standalone.js +++ b/packages/react-devtools-core/webpack.standalone.js @@ -65,6 +65,7 @@ module.exports = { 'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'), 'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget), 'react-dom': resolve(builtModulesDir, 'react-dom'), + 'react-dom/client': resolve(builtModulesDir, 'react-dom/client'), 'react-is': resolve(builtModulesDir, 'react-is'), scheduler: resolve(builtModulesDir, 'scheduler'), }, diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js index ac7c51f3bdc5e..d42a19ee0a711 100644 --- a/packages/react-devtools-extensions/webpack.config.js +++ b/packages/react-devtools-extensions/webpack.config.js @@ -77,6 +77,7 @@ module.exports = { 'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'), 'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget), 'react-dom': resolve(builtModulesDir, 'react-dom'), + 'react-dom/client': resolve(builtModulesDir, 'react-dom/client'), 'react-is': resolve(builtModulesDir, 'react-is'), scheduler: resolve(builtModulesDir, 'scheduler'), }, diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md index fe071633528c6..53edee429bd02 100644 --- a/packages/react-devtools-inline/README.md +++ b/packages/react-devtools-inline/README.md @@ -60,7 +60,7 @@ const contentWindow = iframe.contentWindow; const DevTools = initialize(contentWindow); ``` -3 Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.createRoot` or `ReactDOM.createSyncRoot`. **It should not be rendered with `ReactDOM.render`.** +3 Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using `ReactDOMClient.createRoot`. **It should not be rendered with `ReactDOM.render`.** ## Examples @@ -110,8 +110,7 @@ const DevTools = initializeFrontend(contentWindow); // as setting the src of the