From 1f83b4b414d9ec46fb503f015a8d7685bbea4978 Mon Sep 17 00:00:00 2001 From: Andrey Goncharov Date: Thu, 31 Mar 2022 04:01:33 -0700 Subject: [PATCH] Migrate to React 18 Summary: Sadly, we have to use the experimental version of React to decapitate React Devtools. See https://fb.workplace.com/groups/react.devtools/posts/3135684459978453/?comment_id=3135711763309056&reply_comment_id=3135760513304181 On the bright side, Replay.io and Code Sandbox also use experimental React without any problem. Reviewed By: lblasa Differential Revision: D34926473 fbshipit-source-id: 5cd63cc065c2535f0583464c7b5e37891dadaf14 --- .../src/__tests__/test-utils.node.tsx | 3 + desktop/flipper-plugin/tsconfig.json | 2 +- desktop/flipper-ui-browser/tsconfig.json | 2 +- desktop/flipper-ui-core/package.json | 8 ++- .../src/startFlipperDesktop.tsx | 8 +-- desktop/flipper-ui-core/tsconfig.json | 2 +- desktop/plugins/tsconfig.json | 4 +- desktop/yarn.lock | 58 +++++++++++-------- 8 files changed, 50 insertions(+), 37 deletions(-) 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"