diff --git a/desktop/flipper-plugin/src/__tests__/test-utils.node.tsx b/desktop/flipper-plugin/src/__tests__/test-utils.node.tsx
index ea90cfa34..b3ab3c7d1 100644
--- a/desktop/flipper-plugin/src/__tests__/test-utils.node.tsx
+++ b/desktop/flipper-plugin/src/__tests__/test-utils.node.tsx
@@ -355,6 +355,9 @@ test('plugins can handle import errors', async () => {
"An error occurred when importing data for plugin 'TestPlugin': 'Error: Oops",
[Error: Oops],
],
+ Array [
+ "Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot",
+ ],
]
`);
} finally {
diff --git a/desktop/flipper-plugin/tsconfig.json b/desktop/flipper-plugin/tsconfig.json
index d13f25922..f9a26ecc1 100644
--- a/desktop/flipper-plugin/tsconfig.json
+++ b/desktop/flipper-plugin/tsconfig.json
@@ -4,7 +4,7 @@
"outDir": "lib",
"rootDir": "src",
"lib": ["dom", "ES2019"],
- "types": ["jest", "../types/jest-extensions"]
+ "types": ["jest", "../types/jest-extensions", "react/next", "react-dom/next"]
},
"references": [
{
diff --git a/desktop/flipper-ui-browser/tsconfig.json b/desktop/flipper-ui-browser/tsconfig.json
index 0953a91c9..b067590bd 100644
--- a/desktop/flipper-ui-browser/tsconfig.json
+++ b/desktop/flipper-ui-browser/tsconfig.json
@@ -4,7 +4,7 @@
"outDir": "lib",
"rootDir": "src",
"lib": ["dom", "ES2019"],
- "types": ["../types/flipperGlobals"]
+ "types": ["../types/flipperGlobals", "react/next", "react-dom/next"]
},
"references": [
{
diff --git a/desktop/flipper-ui-core/package.json b/desktop/flipper-ui-core/package.json
index 4e8341e15..4604dc0db 100644
--- a/desktop/flipper-ui-core/package.json
+++ b/desktop/flipper-ui-core/package.json
@@ -30,15 +30,15 @@
"lodash": "^4.17.21",
"lodash.memoize": "^4.1.2",
"p-map": "^4.0.0",
- "react": "17.0.2",
+ "react": "^0.0.0-experimental-14c2be8da-20220304",
"react-async": "^10.0.0",
"react-debounce-render": "^7.0.1",
- "react-dom": "^17.0.1",
+ "react-dom": "^0.0.0-experimental-14c2be8da-20220304",
"react-element-to-jsx-string": "^14.3.4",
"react-markdown": "^6.0.3",
"react-player": "^2.10.0",
"react-redux": "^7.2.6",
- "react-test-renderer": "^17.0.1",
+ "react-test-renderer": "^0.0.0-experimental-2bf7c02f0-20220314",
"react-virtualized-auto-sizer": "^1.0.6",
"react-window": "^1.8.6",
"redux": "^4.1.2",
@@ -52,6 +52,8 @@
"@testing-library/react": "^12.1.4",
"@types/deep-equal": "^1.0.1",
"@types/lodash.memoize": "^4.1.6",
+ "@types/react": "^17.0.39",
+ "@types/react-dom": "^17.0.12",
"@types/react-test-renderer": "^17.0.1",
"@types/react-virtualized-auto-sizer": "^1.0.1",
"@types/react-window": "^1.8.5",
diff --git a/desktop/flipper-ui-core/src/startFlipperDesktop.tsx b/desktop/flipper-ui-core/src/startFlipperDesktop.tsx
index a4ea5e8c6..fdde85ddc 100644
--- a/desktop/flipper-ui-core/src/startFlipperDesktop.tsx
+++ b/desktop/flipper-ui-core/src/startFlipperDesktop.tsx
@@ -8,7 +8,7 @@
*/
import {Provider} from 'react-redux';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
import {init as initLogger} from './fb-stubs/Logger';
import {SandyApp} from './sandy-chrome/SandyApp';
@@ -164,10 +164,8 @@ function init(flipperServer: FlipperServer) {
connectFlipperServerToStore(flipperServer, store, logger);
- ReactDOM.render(
- ,
- document.getElementById('root'),
- );
+ const root = createRoot(document.getElementById('root')!);
+ root.render();
enableConsoleHook();
diff --git a/desktop/flipper-ui-core/tsconfig.json b/desktop/flipper-ui-core/tsconfig.json
index be815009c..1882c0c7d 100644
--- a/desktop/flipper-ui-core/tsconfig.json
+++ b/desktop/flipper-ui-core/tsconfig.json
@@ -6,7 +6,7 @@
"esModuleInterop": true,
"emitDeclarationOnly": true,
"lib": ["dom", "es2019"],
- "types": ["../types/ReactDebounceRender", "../types/flipperGlobals"]
+ "types": ["react/next", "react-dom/next", "../types/ReactDebounceRender", "../types/flipperGlobals"]
},
"references": [
{
diff --git a/desktop/plugins/tsconfig.json b/desktop/plugins/tsconfig.json
index 9f755dc1d..be4c80a0c 100644
--- a/desktop/plugins/tsconfig.json
+++ b/desktop/plugins/tsconfig.json
@@ -11,7 +11,9 @@
"../types/ReactDebounceRender",
"../types/json-format-highlight",
"../types/memoize-weak",
- "../types/XmlBeautifier"
+ "../types/XmlBeautifier",
+ "react/next",
+ "react-dom/next"
]
},
"include": ["public/", "fb/"],
diff --git a/desktop/yarn.lock b/desktop/yarn.lock
index 22be7b267..18489ad73 100644
--- a/desktop/yarn.lock
+++ b/desktop/yarn.lock
@@ -2728,7 +2728,7 @@
dependencies:
"@types/react" "*"
-"@types/react-dom@^17.0.13":
+"@types/react-dom@^17.0.12", "@types/react-dom@^17.0.13":
version "17.0.13"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.13.tgz#a3323b974ee4280070982b3112351bb1952a7809"
integrity sha512-wEP+B8hzvy6ORDv1QBhcQia4j6ea4SFIBttHYpXKPFZRviBvknq0FRh3VrIxeXUmsPkwuXVZrVGG7KUVONmXCQ==
@@ -2766,7 +2766,7 @@
dependencies:
"@types/react" "*"
-"@types/react@*", "@types/react@17.0.39":
+"@types/react@*", "@types/react@17.0.39", "@types/react@^17.0.39":
version "17.0.39"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==
@@ -10416,14 +10416,13 @@ react-debounce-render@^7.0.1:
hoist-non-react-statics "^3.3.2"
lodash.debounce "^4.0.8"
-react-dom@^17.0.1:
- version "17.0.2"
- resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
- integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^0.0.0-experimental-14c2be8da-20220304:
+ version "0.0.0-experimental-14c2be8da-20220304"
+ resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-14c2be8da-20220304.tgz#fb2372884b98f0f3951022425b56643142aa8086"
+ integrity sha512-JpSxGu7O64k06pgzJHZTEFLHB/TMY00QngL1Xi2Nb0f+TvIB3t0bpJD2nZlyOpHIZfNPW5plGTS/XUUgawF2pQ==
dependencies:
loose-envify "^1.1.0"
- object-assign "^4.1.1"
- scheduler "^0.20.2"
+ scheduler "0.0.0-experimental-14c2be8da-20220304"
react-element-to-jsx-string@^14.3.4:
version "14.3.4"
@@ -10448,6 +10447,11 @@ react-inspector@^5.1.0:
is-dom "^1.0.0"
prop-types "^15.0.0"
+react-is@0.0.0-experimental-2bf7c02f0-20220314:
+ version "0.0.0-experimental-2bf7c02f0-20220314"
+ resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-experimental-2bf7c02f0-20220314.tgz#6d99e4a3ba89084565e45641717a1b7af84f7f90"
+ integrity sha512-WdzbJs3ugXn+2K0lZtRReQ+ONDrJ3EeoSEWwdlrFEVF2VWwXztOnNIZGLc1EgP7WA3wBrHV2/isJY1wRs3tVug==
+
react-is@17.0.2, "react-is@^16.12.0 || ^17.0.0", react-is@^17.0.0, react-is@^17.0.1, react-is@^17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
@@ -10523,15 +10527,14 @@ react-shallow-renderer@^16.13.1:
object-assign "^4.1.1"
react-is "^16.12.0 || ^17.0.0"
-react-test-renderer@^17.0.1:
- version "17.0.2"
- resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
- integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
+react-test-renderer@^0.0.0-experimental-2bf7c02f0-20220314:
+ version "0.0.0-experimental-2bf7c02f0-20220314"
+ resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-0.0.0-experimental-2bf7c02f0-20220314.tgz#6b64c9d7bcd70157a01d71fdb3ef0d03208def8b"
+ integrity sha512-5Ebiv1FEXKky/s85kep84GAc8zGQgkRu5oQIHN+ZzXL054f/1EmpcVffddEjGaUYcoX1QWK3LrHrCh71rhAJtw==
dependencies:
- object-assign "^4.1.1"
- react-is "^17.0.2"
+ react-is "0.0.0-experimental-2bf7c02f0-20220314"
react-shallow-renderer "^16.13.1"
- scheduler "^0.20.2"
+ scheduler "0.0.0-experimental-2bf7c02f0-20220314"
react-virtual@^2.10.4:
version "2.10.4"
@@ -10553,13 +10556,12 @@ react-window@^1.8.6:
"@babel/runtime" "^7.0.0"
memoize-one ">=3.1.1 <6"
-react@17.0.2:
- version "17.0.2"
- resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
- integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@^0.0.0-experimental-14c2be8da-20220304:
+ version "0.0.0-experimental-14c2be8da-20220304"
+ resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-14c2be8da-20220304.tgz#a8a7a99d81f9313f9f6c1bdf13233a31fff35e32"
+ integrity sha512-vKXFJCe7tNRzWpsrR55OZCHypfBPmo7P51tAER7rjsg7Kn0oILnhERyfKHyWos8dSudf7aOZdPb1DWVBk7v7sw==
dependencies:
loose-envify "^1.1.0"
- object-assign "^4.1.1"
reactcss@^1.2.0:
version "1.2.3"
@@ -11058,13 +11060,19 @@ saxes@^5.0.1:
dependencies:
xmlchars "^2.2.0"
-scheduler@^0.20.2:
- version "0.20.2"
- resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
- integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@0.0.0-experimental-14c2be8da-20220304:
+ version "0.0.0-experimental-14c2be8da-20220304"
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-14c2be8da-20220304.tgz#9144f2a7acf9315e754cdf566fa1b8a5853a9876"
+ integrity sha512-/2/ars7jto7FA643UmaBWKyIlofeYoWNVggZw94rCBBH7OGnVIPt3q4ajbj8kwu/VlW1HZ7cyX+jWBxVJ4KgSA==
+ dependencies:
+ loose-envify "^1.1.0"
+
+scheduler@0.0.0-experimental-2bf7c02f0-20220314:
+ version "0.0.0-experimental-2bf7c02f0-20220314"
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-2bf7c02f0-20220314.tgz#0c47b7356b64040f285806f72b27f9fb4790232b"
+ integrity sha512-RVBx9wfkLek9qsdlWRb5QRdtz4E5wouRbSWrSoNyQXUL96so75ZXhe6E5iNLhDnjOoP9m/s1Ga00KunDUYjcFg==
dependencies:
loose-envify "^1.1.0"
- object-assign "^4.1.1"
scroll-into-view-if-needed@^2.2.25:
version "2.2.26"