[Identity] Update manual IBC test (#32238)

This PR does the following:
- Update the dependencies in `package.json` so that the build can
compile successfully
- Fix the `format` and `check-format` command
- Update to the latest `webpack` and add polyfill. Reference
[here](https://stackoverflow.com/questions/71524099/webpack-cli-invalid-options-object-dev-server-has-been-initialized-using-an-op)
and
[here](https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5)

Author: minhanh-phan

sdk/identity/identity/test/manual/interactive-browser-credential/package.json

@@ -6,32 +6,36 @@
   "scripts": {
     "build": "webpack --config webpack.config.js",
     "start": "webpack-dev-server",
-    "check-format": "dev-tool run vendored prettier --list-different --config ../../../../../.prettierrc.json --ignore-path ../../../../../.prettierignore \"src/**/*.tsx\"",
-    "format": "dev-tool run vendored prettier --write --config ../../../../../.prettierrc.json --ignore-path ../../../../../.prettierignore \"src/**/*.tsx\""
+    "check-format": "dev-tool run vendored prettier --list-different --config ../../../../../../.prettierrc.json --ignore-path ../../../../../../.prettierignore \"src/**/*.tsx\"",
+    "format": "dev-tool run vendored prettier --write --config ../../../../../../.prettierrc.json --ignore-path ../../../../../../.prettierignore \"src/**/*.tsx\""
   },
   "author": "Microsoft Corporation",
   "license": "MIT",
   "dependencies": {
-    "@azure/identity": "^4.0.1",
-    "@azure/service-bus": "^7.0.3",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "tslib": "2.4.1"
+    "@azure/identity": "^4.5.0",
+    "@azure/service-bus": "^7.9.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
     "@azure/dev-tool": "^1.0.0",
-    "@azure/identity-cache-persistence": "^1.0.0",
-    "@types/express": "^4.16.0",
-    "@types/node": "^18.0.0",
-    "@types/react": "^16.8.24",
-    "@types/react-dom": "^16.8.5",
-    "@types/webpack": "^4.4.13",
-    "@types/webpack-dev-middleware": "^2.0.2",
-    "dotenv": "^16.0.0",
-    "ts-loader": "^8.0.0",
-    "typescript": "~5.6.2",
-    "webpack": "^4.0.0",
-    "webpack-cli": "^3.0.0",
-    "webpack-dev-server": "^3.7.2"
+    "@azure/identity-cache-persistence": "^1.1.1",
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "@types/webpack": "^5.28.5",
+    "@types/webpack-dev-middleware": "^5.3.0",
+    "buffer": "^6.0.3",
+    "dotenv": "^16.4.7",
+    "os-browserify": "^0.3.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.7.2",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.2.0"
   }
 }

sdk/identity/identity/test/manual/interactive-browser-credential/src/index.tsx

@@ -3,6 +3,7 @@
 
 import * as React from "react";
 import * as ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 import { InteractiveBrowserCredential, BrowserLoginStyle } from "@azure/identity";
 import { ServiceBusClient } from "@azure/service-bus";
@@ -65,7 +66,7 @@ let lastLoginStyle: BrowserLoginStyle | undefined;
 let cachedCredential: InteractiveBrowserCredential | undefined;
 function getCredential(
   clientDetails: ClientDetails,
-  cacheCredential: boolean
+  cacheCredential: boolean,
 ): InteractiveBrowserCredential | undefined {
   if (!cacheCredential) {
     cachedCredential = undefined;
@@ -191,7 +192,7 @@ function ClientDetailsEditor({ clientDetails, onSetClientDetails }: ClientDetail
 
 async function sendMessage(
   serviceBusEndpoint: string,
-  clientDetails: ClientDetails
+  clientDetails: ClientDetails,
 ): Promise<string | undefined> {
   const credential = getCredential(clientDetails, clientDetails.cacheCredential);
   const queueName = clientDetails.queueName;
@@ -325,7 +326,7 @@ function TestPage() {
       parallel: false,
       serviceBusEndpoint: "",
       output: "",
-    }
+    },
   );
 
   return (
@@ -338,4 +339,5 @@ function TestPage() {
   );
 }
 
-ReactDOM.render(<TestPage />, document.getElementById("app"));
+const root = createRoot(document.getElementById("app"));
+root.render(<TestPage />);

sdk/identity/identity/test/manual/interactive-browser-credential/webpack.config.js

@@ -1,29 +1,44 @@
 const path = require('path');
+const webpack = require('webpack');
 
 module.exports = {
-  entry: './src/index.tsx',
+  entry: "./src/index.tsx",
   output: {
-    filename: 'index.js',
-    path: path.resolve(__dirname, 'dist')
+    filename: "index.js",
+    path: path.resolve(__dirname, "dist"),
   },
   module: {
     rules: [
       {
         test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/
-      }
-    ]
+        use: "ts-loader",
+        exclude: /node_modules/,
+      },
+    ],
   },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
+    }),
+  ],
   resolve: {
-    extensions: [ '.tsx', '.ts', '.js' ],
-    aliasFields: ['browser']
+    extensions: [".tsx", ".ts", ".js"],
+    aliasFields: ["browser"],
+    alias: {
+      process: "process/browser",
+    },
+    fallback: {
+      path: require.resolve("path-browserify"),
+      os: require.resolve("os-browserify/browser"),
+      "process/browser": require.resolve("process/browser"),
+    },
   },
-  mode: 'development',
+  mode: "development",
   devServer: {
-    contentBase: '.',
+    static: ".",
   },
   optimization: {
-    usedExports: true
-  }
+    usedExports: true,
+  },
 };