fix(sdk): support React 17 backwards compatibility (#46012)

* polyfill useSyncExternalStore for React 17

* adds the shim

* use ReactDOM.render instead of createRoot for backwards compat

* use createRoot for React 18 environment

* refactor renderRoot compatibility

* remove semver dependency

* add small test for version

* use the same check for react 17

enterprise/frontend/src/embedding-sdk/components/public/InteractiveQuestion/components/BackButton.tsx

@@ -5,7 +5,9 @@ import { useInteractiveQuestionContext } from "../context";
 export const BackButton = () => {
   const { onNavigateBack } = useInteractiveQuestionContext();
 
-  return (
-    onNavigateBack && <DashboardBackButton noLink onClick={onNavigateBack} />
-  );
+  if (!onNavigateBack) {
+    return null;
+  }
+
+  return <DashboardBackButton noLink onClick={onNavigateBack} />;
 };

enterprise/frontend/src/embedding-sdk/index.ts

+// polyfills useSyncExternalStore for React 17
+import "./lib/polyfill-use-sync-external-store";
+
 import "metabase/lib/dayjs";
 
 // we need to manually import them here to make sure they are included in the bundle

enterprise/frontend/src/embedding-sdk/lib/polyfill-use-sync-external-store.ts

+import React from "react";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
+
+import { isReact17OrEarlier } from "metabase/lib/react-compat";
+
+// Monkey-patches useSyncExternalStore if we are in React 17,
+// where useSyncExternalStore is not available.
+// This is used in react-redux v8, until they've dropped the shim in v9.
+if (isReact17OrEarlier()) {
+  React.useSyncExternalStore = useSyncExternalStore;
+}

frontend/src/metabase/lib/react-compat.ts

+// Support React 17 backwards compatibility for the Embedding SDK
+
+import React from "react";
+import ReactDOM from "react-dom";
+import { createRoot, type Root } from "react-dom/client";
+
+// React 18 and later has the useSyncExternalStore hook.
+export const isReact17OrEarlier = () => !("useSyncExternalStore" in React);
+
+export function renderRoot(
+  content: React.JSX.Element,
+  element: Element,
+): Root | undefined {
+  if (isReact17OrEarlier()) {
+    ReactDOM.render(content, element);
+    return;
+  }
+
+  const root = createRoot(element);
+  root.render(content);
+
+  return root;
+}
+
+export function unmountRoot(root?: Root, element?: Element) {
+  if (isReact17OrEarlier() && element) {
+    ReactDOM.unmountComponentAtNode(element);
+    return;
+  }
+
+  if (root) {
+    root.unmount();
+  }
+}

frontend/src/metabase/visualizations/components/TableInteractive/TableInteractive.jsx

@@ -3,7 +3,6 @@ import cx from "classnames";
 import PropTypes from "prop-types";
 import { createRef, forwardRef, Component } from "react";
 import { findDOMNode } from "react-dom";
-import { createRoot } from "react-dom/client";
 import { connect } from "react-redux";
 import { Grid, ScrollSync } from "react-virtualized";
 import { t } from "ttag";
@@ -20,6 +19,7 @@ import CS from "metabase/css/core/index.css";
 import { withMantineTheme } from "metabase/hoc/MantineTheme";
 import { getScrollBarSize } from "metabase/lib/dom";
 import { formatValue } from "metabase/lib/formatting";
+import { renderRoot, unmountRoot } from "metabase/lib/react-compat";
 import { setUIControls, zoomInRow } from "metabase/query_builder/actions";
 import {
   getRowIndexToPKMap,
@@ -330,9 +330,7 @@ class TableInteractive extends Component {
       data: { cols, rows },
     } = this.props;
 
-    this._root = createRoot(this._div);
-
-    this._root.render(
+    const content = (
       <EmotionCacheProvider>
         <div style={{ display: "flex" }} ref={this.onMeasureHeaderRender}>
           {cols.map((column, columnIndex) => (
@@ -355,8 +353,10 @@ class TableInteractive extends Component {
             </div>
           ))}
         </div>
-      </EmotionCacheProvider>,
+      </EmotionCacheProvider>
     );
+
+    this._root = renderRoot(content, this._div);
   }
 
   onMeasureHeaderRender = div => {
@@ -390,7 +390,7 @@ class TableInteractive extends Component {
 
     // Doing this on next tick makes sure it actually gets removed on initial measure
     setTimeout(() => {
-      this._root.unmount();
+      unmountRoot(this._root, this._div);
     }, 0);
 
     delete this.columnNeedsResize;