refactor(wip): Upgrade to React 18

superset-frontend/babel.config.js

@@ -53,7 +53,6 @@ module.exports = {
     ['@babel/plugin-transform-runtime', { corejs: 3 }],
     // only used in packages/superset-ui-core/src/chart/components/reactify.tsx
     ['babel-plugin-typescript-to-proptypes', { loose: true }],
-    'react-hot-loader/babel',
     [
       '@emotion/babel-plugin',
       {

superset-frontend/package.json

@@ -132,6 +132,7 @@
     "chrono-node": "^2.7.8",
     "classnames": "^2.2.5",
     "core-js": "^3.38.1",
+    "cypress": "^14.4.1",
     "d3-color": "^3.1.0",
     "d3-scale": "^2.1.2",
     "dayjs": "^1.11.13",
@@ -173,16 +174,15 @@
     "query-string": "^6.13.7",
     "rc-trigger": "^5.3.4",
     "re-resizable": "^6.10.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-ace": "^10.1.0",
     "react-checkbox-tree": "^1.8.0",
     "react-color": "^2.13.8",
     "react-diff-viewer-continued": "^3.4.0",
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
-    "react-hot-loader": "^4.13.1",
     "react-intersection-observer": "^9.16.0",
     "react-js-cron": "^2.1.2",
     "react-json-tree": "^0.17.0",
@@ -238,10 +238,8 @@
     "@babel/runtime": "^7.26.0",
     "@babel/runtime-corejs3": "^7.26.0",
     "@babel/types": "^7.26.9",
-    "@cypress/react": "^8.0.2",
     "@emotion/babel-plugin": "^11.13.5",
     "@emotion/jest": "^11.13.0",
-    "@hot-loader/react-dom": "^17.0.2",
     "@istanbuljs/nyc-config-typescript": "^1.0.1",
     "@mihkeleidast/storybook-addon-source": "^1.0.1",
     "@storybook/addon-actions": "8.1.11",
@@ -256,8 +254,7 @@
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^8.20.1",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^12.8.3",
     "@types/classnames": "^2.2.10",
     "@types/dom-to-image": "^2.6.7",
@@ -268,8 +265,8 @@
     "@types/json-bigint": "^1.0.4",
     "@types/math-expression-evaluator": "^1.3.3",
     "@types/mousetrap": "^1.6.15",
-    "@types/react": "^17.0.83",
-    "@types/react-dom": "^17.0.26",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/react-gravatar": "^2.6.14",
     "@types/react-json-tree": "^0.6.11",
     "@types/react-loadable": "^5.5.11",
@@ -367,6 +364,10 @@
     "npm": "^10.8.1"
   },
   "overrides": {
+    "react-sortable-hoc": {
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0"
+    },
     "core-js": "^3.38.1",
     "d3-color": "^3.1.0",
     "puppeteer": "^22.4.1",

superset-frontend/packages/superset-ui-chart-controls/package.json

@@ -35,16 +35,15 @@
     "@superset-ui/core": "*",
     "@testing-library/dom": "^8.20.1",
     "@testing-library/jest-dom": "*",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "*",
+    "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "*",
     "ace-builds": "^1.4.14",
     "antd": "4.10.3",
     "brace": "^0.11.1",
     "memoize-one": "^5.1.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-ace": "^10.1.0",
-    "react-dom": "^17.0.2"
+    "react-dom": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"

superset-frontend/packages/superset-ui-core/package.json

@@ -74,14 +74,13 @@
     "@emotion/styled": "^11.3.0",
     "@testing-library/dom": "^8.20.1",
     "@testing-library/jest-dom": "*",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "*",
+    "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "*",
     "@types/react": "*",
     "@types/react-loadable": "*",
     "@types/tinycolor2": "*",
     "nanoid": "^5.0.9",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-loadable": "^5.5.0",
     "tinycolor2": "*"
   },

superset-frontend/packages/superset-ui-demo/package.json

@@ -47,8 +47,8 @@
     "gh-pages": "^6.2.0",
     "jquery": "^3.7.1",
     "memoize-one": "^5.2.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-loadable": "^5.5.0",
     "react-resizable": "^3.0.5"
   },

superset-frontend/plugins/legacy-plugin-chart-calendar/package.json

@@ -32,7 +32,7 @@
     "@emotion/react": "^11.4.1",
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "react": "^17.0.2"
+    "react": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"

superset-frontend/plugins/legacy-plugin-chart-chord/package.json

@@ -31,7 +31,7 @@
   "dependencies": {
     "d3": "^3.5.17",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2"
+    "react": "^18.2.0"
   },
   "peerDependencies": {
     "@superset-ui/chart-controls": "*",

superset-frontend/plugins/legacy-plugin-chart-country-map/package.json

@@ -33,6 +33,6 @@
   "peerDependencies": {
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "react": "^17.0.2"
+    "react": "^18.2.0"
   }
 }

superset-frontend/plugins/legacy-plugin-chart-horizon/package.json

@@ -30,7 +30,7 @@
   "peerDependencies": {
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "react": "^17.0.2"
+    "react": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"

superset-frontend/plugins/legacy-plugin-chart-map-box/package.json

@@ -35,7 +35,7 @@
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
     "mapbox-gl": "*",
-    "react": "^17.0.2"
+    "react": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"

superset-frontend/plugins/legacy-plugin-chart-paired-t-test/package.json

@@ -30,7 +30,7 @@
   "peerDependencies": {
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "react": "^17.0.2"
+    "react": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/package.json

@@ -35,6 +35,6 @@
   "peerDependencies": {
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "react": "^17.0.2"
+    "react": "^18.2.0"
   }
 }

superset-frontend/plugins/legacy-plugin-chart-partition/package.json

@@ -31,9 +31,9 @@
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
     "@testing-library/jest-dom": "*",
-    "@testing-library/react": "^12.1.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@testing-library/react": "^13.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"

superset-frontend/plugins/legacy-plugin-chart-rose/package.json

@@ -31,7 +31,7 @@
     "@emotion/react": "^11.4.1",
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "react": "^17.0.2"
+    "react": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"

superset-frontend/plugins/legacy-plugin-chart-world-map/package.json

@@ -38,6 +38,6 @@
   "peerDependencies": {
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "react": "^17.0.2"
+    "react": "^18.2.0"
   }
 }

superset-frontend/plugins/legacy-preset-chart-deckgl/package.json

@@ -52,8 +52,8 @@
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
     "mapbox-gl": "*",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-map-gl": "^6.1.19"
   },
   "publishConfig": {

superset-frontend/plugins/legacy-preset-chart-nvd3/package.json

@@ -42,6 +42,6 @@
   "peerDependencies": {
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "react": "^17.0.2"
+    "react": "^18.2.0"
   }
 }

superset-frontend/plugins/plugin-chart-cartodiagram/package.json

@@ -45,7 +45,7 @@
     "geostyler-wfs-parser": "^2.0.0",
     "ol": "^7.1.0",
     "polished": "*",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

superset-frontend/plugins/plugin-chart-echarts/package.json

@@ -34,7 +34,7 @@
     "@superset-ui/core": "*",
     "echarts": "*",
     "memoize-one": "*",
-    "react": "^17.0.2"
+    "react": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"

superset-frontend/plugins/plugin-chart-handlebars/package.json

@@ -37,9 +37,9 @@
     "ace-builds": "^1.4.14",
     "lodash": "^4.17.11",
     "dayjs": "^1.11.13",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-ace": "^10.1.0",
-    "react-dom": "^17.0.2"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.14",

superset-frontend/plugins/plugin-chart-pivot-table/package.json

@@ -32,8 +32,8 @@
     "@superset-ui/core": "*",
     "lodash": "^4.17.11",
     "prop-types": "*",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@babel/types": "^7.26.9",

superset-frontend/plugins/plugin-chart-table/package.json

@@ -41,14 +41,13 @@
     "@superset-ui/core": "*",
     "@testing-library/dom": "^8.20.1",
     "@testing-library/jest-dom": "*",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "*",
+    "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "*",
     "@types/classnames": "*",
     "@types/react": "*",
     "match-sorter": "^6.3.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"

superset-frontend/plugins/plugin-chart-word-cloud/package.json

@@ -39,7 +39,7 @@
     "@superset-ui/core": "*",
     "@types/lodash": "*",
     "@types/react": "*",
-    "react": "^17.0.2"
+    "react": "^18.2.0"
   },
   "devDependencies": {
     "@types/d3-cloud": "^1.2.9"

superset-frontend/src/preamble.ts

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { setConfig as setHotLoaderConfig } from 'react-hot-loader';
 import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
 import dayjs from 'dayjs';
 // eslint-disable-next-line no-restricted-imports
@@ -35,10 +34,6 @@ import setupDashboardComponents from './setup/setupDashboardComponents';
 import { User } from './types/bootstrapTypes';
 import getBootstrapData, { applicationRoot } from './utils/getBootstrapData';
 
-if (process.env.WEBPACK_MODE === 'development') {
-  setHotLoaderConfig({ logLevel: 'debug', trackTailUpdates: false });
-}
-
 // eslint-disable-next-line import/no-mutable-exports
 const bootstrapData = getBootstrapData();
 

superset-frontend/src/views/App.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 import { Suspense, useEffect } from 'react';
-import { hot } from 'react-hot-loader/root';
 import {
   BrowserRouter as Router,
   Switch,
@@ -109,4 +108,4 @@ const App = () => (
   </Router>
 );
 
-export default hot(App);
+export default App;

superset-frontend/src/views/index.tsx

@@ -18,7 +18,8 @@
  */
 import 'src/public-path';
 
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('app'));
+const root = createRoot(document.getElementById('app') as HTMLElement);
+root.render(<App />);

superset-frontend/webpack.config.js

@@ -270,7 +270,6 @@ const config = {
               'prop-types-extra',
               'redux',
               'react-redux',
-              'react-hot-loader',
               'react-sortable-hoc',
               'react-table',
               'react-ace',
@@ -389,14 +388,6 @@ const config = {
         test: /ace-builds.*\/worker-.*$/,
         type: 'asset/resource',
       },
-      // react-hot-loader use "ProxyFacade", which is a wrapper for react Component
-      // see https://github.com/gaearon/react-hot-loader/issues/1311
-      // TODO: refactor recurseReactClone
-      {
-        test: /\.js$/,
-        include: /node_modules\/react-dom/,
-        use: ['react-hot-loader/webpack'],
-      },
       {
         test: /\.css$/,
         include: [APP_DIR, /superset-ui.+\/src/],