Update to make React compatible with Node 18

client-react/config-overrides.js

@@ -54,7 +54,7 @@ module.exports = {
       }),
     ];
     /** @note Configure webpack to resolve `joi` module references as `joi-browser`. */
-    config.resolve = { ...config.resolve, alias: { ...config.resolve.alias, joi: 'joi-browser' } };
+    config.resolve = { ...config.resolve, alias: { ...config.resolve.alias, joi: 'joi-browser' }, fallback: { "fs": false } };
     return config;
   },
 };

client-react/package.json

@@ -24,7 +24,7 @@
     "react-app-rewired": "^2.1.8",
     "react-dom": "17.0.2",
     "react-i18next": "^10.0.4",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.1",
     "react-svg": "^7.2.14",
     "react-use": "^5.4.1",
     "rxjs": "^6.4.0",
@@ -43,6 +43,7 @@
     "lint": "eslint --ext .tsx,.ts src --format visualstudio --quiet"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.14.5",
     "@types/applicationinsights-js": "^1.0.9",
     "@types/enzyme": "^3.10.16",
     "@types/jest": "^26.0.24",

client-react/src/components/CipherSuite/MinTLSCipherSuiteSelector.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldProps } from 'formik';
-import { Link } from '@fluentui/react/lib/components/Link';
-import { Text } from '@fluentui/react/lib/components/Text';
+import { Link, Text } from '@fluentui/react';
 import CustomPanel from '../CustomPanel/CustomPanel';
 import { CipherSuite } from '../../models/site/site';
 import { PanelType } from '@fluentui/react/lib/Panel';

client-react/src/pages/app/app-settings/ErrorPages/ErrorPageFileUpload.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useRef } from 'react';
 import { IconButton, Stack, StackItem, TextField } from '@fluentui/react';
-import { Text } from '@fluentui/react/lib/components/Text';
+import { Text } from '@fluentui/react';
 import { useTranslation } from 'react-i18next';
 import { uploadStyle, stackStyle, stackTokens, FabricFolder, browseButtonStyle } from './ErrorPageGrid.styles';
 import { ThemeContext } from '../../../../ThemeContext';
@@ -21,7 +21,7 @@ const extractErrorPageFromFile = (input): Promise<string> => {
   });
 };
 
-const ErrorPageFileUploader: React.FC<ErrorPageFileUploaderProps> = props => {
+const ErrorPageFileUploader: React.FC<ErrorPageFileUploaderProps> = (props: ErrorPageFileUploaderProps) => {
   const { setFileUploadSuccess, setFile, fileUploadSuccess } = props;
   const { t } = useTranslation();
   const uploadFileRef = useRef<HTMLInputElement | null>(null);