DevTools imports (#24163)
* Update DevTools imports: react-dom -> react-dom/client * Silence ReactDOM.render warning in DevTools test shell
Brian Vaughn committed
Mar 25, 2022 at 09:02 UTC
033fe52b48338aec2522f1918408296cbec523d6
8 files changed
+12
-14
packages/react-devtools-core/src/standalone.js
+1
-4
@@ -8,10 +8,7 @@
8
*/
9
10
import {createElement} from 'react';
11
-import {
12
- // $FlowFixMe Flow does not yet know about flushSync()
13
- flushSync,
14
-} from 'react-dom';
11
+import {flushSync} from 'react-dom';
12
import {createRoot} from 'react-dom/client';
13
import Bridge from 'react-devtools-shared/src/bridge';
14
import Store from 'react-devtools-shared/src/devtools/store';
packages/react-devtools-extensions/src/main.js
+2
-1
@@ -1,7 +1,8 @@
1
/* global chrome */
2
3
import {createElement} from 'react';
4
-import {createRoot, flushSync} from 'react-dom';
4
+import {flushSync} from 'react-dom';
5
+import {createRoot} from 'react-dom/client';
6
import Bridge from 'react-devtools-shared/src/bridge';
7
import Store from 'react-devtools-shared/src/devtools/store';
8
import {getBrowserName, getBrowserTheme} from './utils';
packages/react-devtools-shell/src/app/Iframe/index.js
+2
-2
@@ -2,7 +2,7 @@
2
3
import * as React from 'react';
4
import {Fragment} from 'react';
5
-import * as ReactDOM from 'react-dom';
5
+import {createPortal} from 'react-dom';
6
7
export default function Iframe() {
8
return (
@@ -56,7 +56,7 @@ function Frame(props) {
56
style={iframeStyle}
57
/>
58
59
- {element ? ReactDOM.createPortal(props.children, element) : null}
59
+ {element ? createPortal(props.children, element) : null}
60
</Fragment>
61
);
62
}
packages/react-devtools-shell/src/app/devtools.js
+1
-2
@@ -1,8 +1,7 @@
1
/** @flow */
2
3
import {createElement} from 'react';
4
-// $FlowFixMe Flow does not yet know about createRoot()
5
-import {createRoot} from 'react-dom';
4
+import {createRoot} from 'react-dom/client';
5
import {
6
activate as activateBackend,
7
initialize as initializeBackend,
packages/react-devtools-shell/src/app/index.js
+1
@@ -28,6 +28,7 @@ ignoreErrors([
28
'Warning: Legacy context API',
29
'Warning: Unsafe lifecycle methods',
30
'Warning: %s is deprecated in StrictMode.', // findDOMNode
31
+ 'Warning: ReactDOM.render is no longer supported in React 18',
32
]);
33
ignoreWarnings(['Warning: componentWillReceiveProps has been renamed']);
34
ignoreLogs([]);
packages/react-devtools-shell/src/e2e/app.js
+2
-2
@@ -4,7 +4,7 @@
4
5
import * as React from 'react';
6
import * as ReactDOM from 'react-dom';
7
-import * as ReactDOMClient from 'react-dom/client';
7
+import {createRoot} from 'react-dom/client';
8
9
const container = document.createElement('div');
10
@@ -14,7 +14,7 @@ const container = document.createElement('div');
14
// so that it can load things other than just ToDoList.
15
const App = require('./apps/ListApp').default;
16
17
-const root = ReactDOMClient.createRoot(container);
17
+const root = createRoot(container);
18
root.render(<App />);
19
20
// ReactDOM Test Selector APIs used by Playwright e2e tests
packages/react-devtools-shell/src/e2e/devtools.js
+2
-2
@@ -1,6 +1,6 @@
1
import * as React from 'react';
2
import * as ReactDOM from 'react-dom';
3
-import * as ReactDOMClient from 'react-dom/client';
3
+import {createRoot} from 'react-dom/client';
4
import {
5
activate as activateBackend,
6
initialize as initializeBackend,
@@ -34,7 +34,7 @@ function init(appIframe, devtoolsContainer, appSource) {
34
35
inject(contentDocument, appSource, () => {
36
// $FlowFixMe Flow doesn't know about createRoot() yet.
37
- ReactDOMClient.createRoot(devtoolsContainer).render(
37
+ createRoot(devtoolsContainer).render(
38
<DevTools
39
hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
40
showTabBar={true}
packages/react-devtools-shell/src/multi/devtools.js
+1
-1
@@ -1,5 +1,5 @@
1
import * as React from 'react';
2
-import {createRoot} from 'react-dom';
2
+import {createRoot} from 'react-dom/client';
3
import {
4
activate as activateBackend,
5
createBridge as createBackendBridge,