Revert "bump react version to react 19 (#578)" (#580)

This reverts commit 779152a.

Author: AtishayMsft

apps/plotly_examples/package.json

@@ -6,8 +6,7 @@
     "@babel/core": "^7.16.0",
     "@fluentui/react-charting": "^5.25.0",
     "@fluentui/react-charts": "0.0.0-nightly-20251024-0406.1",
-    "@fluentui/react-components": "^9.72.2",
-    "@fluentui/react-menu": "^9.20.1",
+    "@fluentui/react-components": "^9.21.0",
     "@fluentui/react-portal-compat": "9.0.176",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@svgr/webpack": "^5.5.0",
@@ -46,10 +45,10 @@
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^7.0.1",
     "prompts": "^2.4.2",
-    "react": "^19.0.0",
+    "react": "^17.0.2",
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
-    "react-dom": "^19.0.0",
+    "react-dom": "^17.0.2",
     "react-plotly.js": "^2.6.0",
     "react-refresh": "^0.11.0",
     "resolve": "^1.20.0",
@@ -94,15 +93,15 @@
   "devDependencies": {
     "@playwright/test": "^1.49.1",
     "@types/node": "^22.10.7",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
+    "@types/react": "17.0.44",
+    "@types/react-dom": "17.0.15",
     "parse-svg-path": "^0.1.2"
   },
   "resolutions": {
-    "@types/react": "19.0.0",
-    "@types/react-dom": "19.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "@types/react": "17.0.44",
+    "@types/react-dom": "17.0.15",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "@fluentui/chart-utilities": "^1.1.35"
   },
   "jest": {

apps/plotly_examples/src/components/DeclarativeChart.tsx

@@ -97,8 +97,8 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = () => {
   const [isJsonInputEnabled, toggleJsonInput] = React.useState<boolean>(false);
   const [jsonInputValue, setJsonInputValue] = React.useState<string>('');
 
-  const declarativeChartRef = React.useRef<IDeclarativeChart>(null!);
-  const declarativeChartV9Ref = React.useRef<IDeclarativeChart>(null!);
+  const declarativeChartRef = React.useRef<IDeclarativeChart>(null);
+  const declarativeChartV9Ref = React.useRef<IDeclarativeChart>(null);
   let lastKnownValidLegends: string[] | undefined = selectedLegends;
 
   React.useEffect(() => {
@@ -247,7 +247,7 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = () => {
     }
   };
 
-  const createDeclarativeChart = (): React.JSX.Element => {
+  const createDeclarativeChart = (): JSX.Element => {
     const theme = getSelection("Theme", "Light");
     const isRTL = getSelection("RTL", "false") === "true";
     const uniqueKey = `${theme}_${isRTL}`;

apps/plotly_examples/src/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { createRoot } from "react-dom/client";
+import ReactDOM from 'react-dom';
 import App from './App';
 
-const root = createRoot(document.getElementById('root')!);
-root.render(
+ReactDOM.render(
   <React.StrictMode>
     <App />
-   </React.StrictMode>
+  </React.StrictMode>,
+  document.getElementById('root')
 );