DevTools imports (#24163)

* Update DevTools imports: react-dom -> react-dom/client * Silence ReactDOM.render warning in DevTools test shell
facebook · Apr 14, 2022 · 9fa7417 · 9fa7417
1 parent 4dd7ca3
commit 9fa7417
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 14 deletions.
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
@@ -8,10 +8,7 @@
  */
 
 import {createElement} from 'react';
-import {
-  // $FlowFixMe Flow does not yet know about flushSync()
-  flushSync,
-} from 'react-dom';
+import {flushSync} from 'react-dom';
 import {createRoot} from 'react-dom/client';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
@@ -1,7 +1,8 @@
 /* global chrome */
 
 import {createElement} from 'react';
-import {createRoot, flushSync} from 'react-dom';
+import {flushSync} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
 import {getBrowserName, getBrowserTheme} from './utils';

diff --git a/packages/react-devtools-shell/src/app/Iframe/index.js b/packages/react-devtools-shell/src/app/Iframe/index.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import {Fragment} from 'react';
-import * as ReactDOM from 'react-dom';
+import {createPortal} from 'react-dom';
 
 export default function Iframe() {
   return (
@@ -56,7 +56,7 @@ function Frame(props) {
         style={iframeStyle}
       />
 
-      {element ? ReactDOM.createPortal(props.children, element) : null}
+      {element ? createPortal(props.children, element) : null}
     </Fragment>
   );
 }

diff --git a/packages/react-devtools-shell/src/app/devtools.js b/packages/react-devtools-shell/src/app/devtools.js
@@ -1,8 +1,7 @@
 /** @flow */
 
 import {createElement} from 'react';
-// $FlowFixMe Flow does not yet know about createRoot()
-import {createRoot} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import {
   activate as activateBackend,
   initialize as initializeBackend,

diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
@@ -28,6 +28,7 @@ ignoreErrors([
   'Warning: Legacy context API',
   'Warning: Unsafe lifecycle methods',
   'Warning: %s is deprecated in StrictMode.', // findDOMNode
+  'Warning: ReactDOM.render is no longer supported in React 18',
 ]);
 ignoreWarnings(['Warning: componentWillReceiveProps has been renamed']);
 ignoreLogs([]);

diff --git a/packages/react-devtools-shell/src/e2e/app.js b/packages/react-devtools-shell/src/e2e/app.js
@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import * as ReactDOMClient from 'react-dom/client';
+import {createRoot} from 'react-dom/client';
 
 const container = document.createElement('div');
 
@@ -14,7 +14,7 @@ const container = document.createElement('div');
 // so that it can load things other than just ToDoList.
 const App = require('./apps/ListApp').default;
 
-const root = ReactDOMClient.createRoot(container);
+const root = createRoot(container);
 root.render(<App />);
 
 // ReactDOM Test Selector APIs used by Playwright e2e tests

diff --git a/packages/react-devtools-shell/src/e2e/devtools.js b/packages/react-devtools-shell/src/e2e/devtools.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import * as ReactDOMClient from 'react-dom/client';
+import {createRoot} from 'react-dom/client';
 import {
   activate as activateBackend,
   initialize as initializeBackend,
@@ -34,7 +34,7 @@ function init(appIframe, devtoolsContainer, appSource) {
 
   inject(contentDocument, appSource, () => {
     // $FlowFixMe Flow doesn't know about createRoot() yet.
-    ReactDOMClient.createRoot(devtoolsContainer).render(
+    createRoot(devtoolsContainer).render(
       <DevTools
         hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
         showTabBar={true}

diff --git a/packages/react-devtools-shell/src/multi/devtools.js b/packages/react-devtools-shell/src/multi/devtools.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {createRoot} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import {
   activate as activateBackend,
   createBridge as createBackendBridge,