Update desktop to Webpack v5 and Angular v12 (#2934)

--------- Co-authored-by: David Watrous <509299+dpwatrous@users.noreply.github.com> Co-authored-by: Rena Chen <rechen@microsoft.com> Co-authored-by: Hoppe Wang <hoppewang@microsoft.com>
2024-09-12 08:34:19 +09:00 · 2024-09-12 08:34:19 +09:00 · d43018f96d
--- a/desktop/config/webpack.common.js
+++ b/desktop/config/webpack.common.js
@ -3,23 +3,22 @@ const { DefinePlugin } = require("webpack");

 const rules = {
    html: {
-        test: /\.html$/,
-        loader: "raw-loader",
+        test: /(\.html$)|(\.template$)/,
+        type: "asset/source",
        exclude: [/node_modules/, helpers.root("src/app/index.html")],
    },
    json: {
-        type: "javascript/auto",
        test: /\.json$/,
-        loader: "raw-loader",
+        type: "asset/source",
        exclude: [/node_modules/],
    },
    file: {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        loader: "file-loader",
+        type: "asset/resource",
    },
    font: {
        test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,
-        loader: "url-loader?limit=10000&mimetype=application/font-woff",
+        type: "asset"
    },
 };

--- a/desktop/config/webpack.config.base.js
+++ b/desktop/config/webpack.config.base.js
@ -3,7 +3,7 @@ const helpers = require("./helpers");
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const { AngularCompilerPlugin } = require("@ngtools/webpack");
+const { AngularWebpackPlugin } = require("@ngtools/webpack");
 const { commonRules } = require("./webpack.common");
 const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");

@ -39,7 +39,7 @@ const baseConfig = {
        rules: [
            {
                test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
-                use: ["@ngtools/webpack"],
+                loader: '@ngtools/webpack',
                exclude: [/\.spec\.ts/, /src\/test\//]
            },
            ...commonRules,
@ -47,12 +47,11 @@ const baseConfig = {
    },
    plugins: [
        new MonacoWebpackPlugin(),
-        new AngularCompilerPlugin({
-            skipCodeGeneration: !AOT,
-            tsConfigPath: "./tsconfig.browser.json",
-            mainPath: "./src/app/app.ts",              // will auto-detect the root NgModule.
-            sourceMap: true,
-            // forkTypeChecker: !AOT,
+        new AngularWebpackPlugin({
+            tsconfig: "./tsconfig.browser.json",
+            compilerOptions:{
+                sourceMap: true,
+            }
        }),
        new CopyWebpackPlugin({
            patterns: [
@ -67,7 +66,7 @@ const baseConfig = {
            template: "src/app/index.html",
            chunksSortMode: (a, b) => {
                const entryPoints = ["app", "vendor", "styles", "sw-register", "polyfills", "inline"];
-                return entryPoints.indexOf(b.names[0]) - entryPoints.indexOf(a.names[0]);
+                return entryPoints.indexOf(b) - entryPoints.indexOf(a);
            },
            inject: "body",
            metadata: METADATA,
@ -81,6 +80,9 @@ const baseConfig = {
        }),
    ],
    target: "electron-renderer",
+    stats: {
+        errorDetails: true,
+    },
 };

 module.exports = baseConfig;
--- a/desktop/config/webpack.config.dev.js
+++ b/desktop/config/webpack.config.dev.js
@ -1,7 +1,6 @@
 const config = require("./webpack.config.base");
 const path = require("path");
 const merge = require("webpack-merge");
-const WriteFilePlugin = require("write-file-webpack-plugin");
 const { defineEnv } = require("./webpack.common");
 const EvalSourceMapDevToolPlugin = require("webpack/lib/EvalSourceMapDevToolPlugin");

@ -17,11 +16,19 @@ module.exports = merge(config, {
    devServer: {
        host,
        port,
-        stats: {
-            // Angular emits warning which are spaming the console
-            warnings: false,
+        client: {
+            logging: "error",
+            overlay: {
+                errors: true,
+                warnings: false,
+                runtimeErrors: true,
+            },
+        },
+        devMiddleware: {
+            writeToDisk: (filePath) => {
+                return /vendor\/vs.*/.test(filePath);
+            }
        },
-        clientLogLevel: "error",
    },
    output: {
        path: path.join(__dirname, "../build/"),
@ -33,11 +40,11 @@ module.exports = merge(config, {
        rules: [
            {
                test: /\.scss$/,
-                loader: [
+                use: [
                    {
                        loader: "style-loader",
                        options: {
-                            singleton: true,
+                            injectType: "singletonStyleTag",
                        },
                    },
                    "css-loader",
@ -46,11 +53,11 @@ module.exports = merge(config, {
            },
            {
                test: /\.css$/,
-                loader: [
+                use: [
                    {
                        loader: "style-loader",
                        options: {
-                            singleton: true,
+                            injectType: "singletonStyleTag",
                        },
                    },
                    "css-loader",
@ -63,9 +70,6 @@ module.exports = merge(config, {
            moduleFilenameTemplate: "[resource-path]",
            sourceRoot: "webpack:///"
        }),
-        defineEnv(ENV),
-        new WriteFilePlugin({
-            test: /vendor\/vs.*/
-        }),
+        defineEnv(ENV)
    ],
 });
--- a/desktop/config/webpack.config.prod.js
+++ b/desktop/config/webpack.config.prod.js
@ -1,6 +1,5 @@
 const config = require("./webpack.config.base");
 const helpers = require("./helpers");
-const LoaderOptionsPlugin = require("webpack/lib/LoaderOptionsPlugin");
 const merge = require("webpack-merge");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const { defineEnv } = require("./webpack.common");
@ -32,14 +31,6 @@ module.exports = merge(config, {
         */
        filename: "[name].[chunkhash].bundle.js",

-        /**
-         * The filename of the SourceMaps for the JavaScript files.
-         * They are inside the output.path directory.
-         *
-         * @see http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
-         */
-        sourceMapFilename: "[name].[chunkhash].bundle.map",
-
        /**
         * The filename of non-entry chunks as relative path
         * inside the output.path directory.
@ -71,31 +62,5 @@ module.exports = merge(config, {
    plugins: [
        new MiniCssExtractPlugin({ filename: "[name]-[hash].css", chunkFilename: "[name]-[chunkhash].css" }),
        defineEnv(ENV),
-
-        new LoaderOptionsPlugin({
-            minimize: true,
-            debug: false,
-            options: {
-
-                /**
-                 * Html loader advanced options
-                 *
-                 * See: https://github.com/webpack/html-loader#advanced-options
-                 */
-                // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
-                htmlLoader: {
-                    minimize: true,
-                    removeAttributeQuotes: false,
-                    caseSensitive: true,
-                    customAttrSurround: [
-                        [/#/, /(?:)/],
-                        [/\*/, /(?:)/],
-                        [/\[?\(?/, /(?:)/]
-                    ],
-                    customAttrAssign: [/\)?\]?=/]
-                },
-
-            }
-        }),
    ],
 });
--- a/desktop/config/webpack.config.test.js
+++ b/desktop/config/webpack.config.test.js
@ -1,5 +1,4 @@
 const config = require("./webpack.config.base");
-const helpers = require("./helpers");
 const { commonRules, defineEnv } = require("./webpack.common");
 const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 const ENV = "test";
@ -18,6 +17,7 @@ config.module.rules = config.module.rules = [
    {
        test: /\.ts$/,
        use: [
+            "@jsdevtools/coverage-istanbul-loader",
            {
                loader: "ts-loader",
                options: {
@ -28,15 +28,15 @@ config.module.rules = config.module.rules = [
        ],
        exclude: [/node_modules/, /\.node\.spec\.ts/],  // node.spec.ts are to be run in node environment
    },
-    ...commonRules,
+    ...commonRules
 ].concat(
    [{
        test: /\.scss$/,
-        loader: "style-loader!css-loader!sass-loader",
+        use: ["style-loader", "css-loader", "sass-loader"],
    },
    {
        test: /node_modules.*\.css$/,
-        loader: "style-loader!css-loader",
+        use: ["style-loader", "css-loader"],
    },
    /**
     * Instruments JS files with Istanbul for subsequent code coverage reporting.
@ -44,23 +44,6 @@ config.module.rules = config.module.rules = [
     *
     * See: https://github.com/deepsweet/istanbul-instrumenter-loader
     */
-    {
-        enforce: "post",
-        test: /\.(js|ts)$/,
-        loader: "istanbul-instrumenter-loader",
-        query: {
-            esModules: true
-        },
-        include: [
-            helpers.root("app"),
-            helpers.root("src"),
-        ],
-        exclude: [
-            helpers.root("src/test"),
-            /\.(e2e|spec)\.(ts)$/,
-            /node_modules/
-        ]
-    }
    ]
 );

--- a/desktop/package-lock.json
+++ b/desktop/package-lock.json
--- a/desktop/package.json
+++ b/desktop/package.json
@ -4,6 +4,8 @@
    "src/@batch-flask/extensions/*",
    "src/app/environment.ts",
    "src/app/commands/**/*",
+    "test/**/*",
+    "src/test/**/*",
    "*.scss"
  ],
  "productName": "Batch Explorer",
@ -41,7 +43,7 @@
    "test-models": "npm run ts scripts/swagger/validate-models.ts",
    "build-client": " tsc -p tsconfig.node.json",
    "build-client:dev": " tsc -p tsconfig.node.json --noUnusedLocals false",
-    "build-app": "npm run webpack -- --profile --colors --display-error-details --display-cached",
+    "build-app": "npm run webpack -- --profile",
    "build-python": "pyinstaller python/main.spec -y --distpath=python/dist --workpath=python/build",
    "build": "npm run clean && npm run build-translations && npm run build-client && npm run build-app",
    "build:clean": "npm run build",
@ -49,21 +51,21 @@
    "build:prod": "cross-env NODE_ENV=production npm run build",
    "build:test": "npm run build && npm run test",
    "build-translations": "bux build-translations --src src --dest i18n --outputPath resources/i18n",
-    "watch": "npm run webpack -- --watch --progress --profile --colors --display-error-details --display-cached",
+    "watch": "npm run webpack -- --watch --progress --profile",
    "electron": "electron build/client/main.js",
    "electron:prod": "cross-env NODE_ENV=production electron build/client/main.js",
    "dev": "concurrently --kill-others \"npm run dev-server\" \"npm run dev-electron\"",
    "dev-electron": "cross-env HOT=1 electron build/client/main.js",
-    "dev-server": "npm run webpack-dev-server -- --hot --inline --colors --content-base app/",
+    "dev-server": "npm run webpack-dev-server",
    "eslint": "eslint -c .eslintrc.js . --quiet",
    "eslint:verbose": "eslint -c .eslintrc.js .",
-    "stylelint": "stylelint --syntax scss \"src/app/**/*.scss\"",
+    "stylelint": "stylelint --custom-syntax postcss-scss \"src/app/**/*.scss\"",
    "lint": "npm run eslint && npm run stylelint",
    "lint:fix": "npm run eslint --fix && npm run stylelint",
    "package": "npm run ts scripts/package/package.ts",
    "postinstall": "npm run rebuild:app-deps && npx patch-package",
    "start-publish": "npm run ts scripts/publish/publish.ts",
-    "webpack": "cross-env NODE_OPTIONS=--openssl-legacy-provider node --trace-deprecation --max_old_space_size=4096 node_modules/webpack/bin/webpack.js",
+    "webpack": "cross-env node --trace-deprecation --max_old_space_size=4096 node_modules/webpack/bin/webpack.js",
    "webpack:stats": "cross-env NODE_ENV=production NODE_OPTIONS=--openssl-legacy-provider npm run webpack -- --profile --json > coverage/webpack-stats.json",
    "webpack-dev-server": "cross-env NODE_OPTIONS=--openssl-legacy-provider node --trace-deprecation --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "rebuild:app-deps": "electron-builder install-app-deps",
@ -89,9 +91,9 @@
    "node": ">=18.0.0"
  },
  "peerDependencies": {
+    "@fluentui/azure-themes": ">=8.6.34 < 9.0.0",
    "@fluentui/react": ">=8.97.2 <9.0.0",
    "@fluentui/react-theme-provider": ">=0.19.16 <1.0.0",
-    "@fluentui/azure-themes": ">=8.6.34 < 9.0.0",
    "mobx": "^6.3.2",
    "mobx-react-lite": "^3.2.0",
    "react": ">=17.0.2 <18.0.0",
@ -102,9 +104,10 @@
    "@angular-eslint/eslint-plugin": "^13.2.1",
    "@angular-eslint/eslint-plugin-template": "^13.2.1",
    "@angular-eslint/template-parser": "^13.2.1",
-    "@angular/compiler-cli": "^11.2.12",
+    "@angular/compiler-cli": "^12.0.0",
    "@batch/common-config": "^1.0.0",
-    "@ngtools/webpack": "^11.2.12",
+    "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
+    "@ngtools/webpack": "^12.0.0",
    "@playwright/test": "^1.43.1",
    "@types/chart.js": "^2.9.24",
    "@types/d3": "^7.4.0",
@ -116,10 +119,7 @@
    "@types/js-yaml": "^3.12.5",
    "@types/luxon": "^1.27.1",
    "@types/node": "18.11.9",
-    "@types/node-fetch": "^2.5.7",
    "@types/proxyquire": "^1.3.28",
-    "@types/react": "^17.0.53",
-    "@types/react-dom": "^17.0.18",
    "@types/strip-json-comments": "^0.0.30",
    "@types/tinycolor2": "^1.4.2",
    "@types/webdriverio": "^4.13.3",
@ -127,8 +127,8 @@
    "angular2-template-loader": "^0.6.2",
    "colors": "^1.4.0",
    "concurrently": "^5.3.0",
-    "copy-webpack-plugin": "^6.0.3",
-    "css-loader": "^2.1.1",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
    "electron": "^29.3.1",
    "electron-builder": "^24.13.3",
    "eslint": "^7.19.0",
@ -137,10 +137,8 @@
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsdoc": "^37.9.6",
    "eslint-plugin-prefer-arrow": "^1.2.3",
-    "file-loader": "^3.0.1",
-    "fork-ts-checker-webpack-plugin": "^5.1.0",
-    "html-webpack-plugin": "^3.2.0",
-    "istanbul-instrumenter-loader": "^3.0.1",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "html-webpack-plugin": "^5.5.3",
    "jasmine": "~3.5.0",
    "jasmine-axe": "^1.1.0",
    "jasmine-core": "^3.6.0",
@ -155,51 +153,49 @@
    "karma-mocha-reporter": "^2.2.5",
    "karma-sourcemap-loader": "^0.4.0",
    "karma-webpack": "^5.0.0",
-    "loader-utils": "^1.4.2",
+    "loader-utils": "^3.2.1",
    "merge2": "^1.4.1",
-    "mini-css-extract-plugin": "^0.5.0",
-    "monaco-editor-webpack-plugin": "^6.0.0",
-    "node-fetch": "^2.6.7",
+    "mini-css-extract-plugin": "^2.7.6",
+    "monaco-editor-webpack-plugin": "^7.1.0",
    "nyc": "^15.1.0",
-    "patch-package": "^6.5.1",
-    "playwright": "^1.43.1",
+    "patch-package": "^8.0.0",
+    "playwright": "^1.18.1",
+    "postcss-scss": "^4.0.9",
    "prettier": "^2.2.1",
    "proxyquire": "^2.1.3",
-    "raw-loader": "^1.0.0",
    "rimraf": "^2.7.1",
-    "sass": "^1.26.10",
-    "sass-loader": "^9.0.3",
-    "style-loader": "^0.23.1",
-    "stylelint": "^13.6.1",
-    "to-string-loader": "^1.1.6",
-    "ts-loader": "^5.4.5",
-    "ts-node": "^8.10.2",
+    "sass": "^1.66.1",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
+    "stylelint": "^15.10.3",
+    "to-string-loader": "^1.2.0",
+    "ts-loader": "^9.4.4",
+    "ts-node": "^10.9.1",
    "typescript": "~4.6.0",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
    "webpack-inline-manifest-plugin": "^4.0.1",
    "webpack-merge": "^4.2.2",
-    "yesno": "^0.0.1"
+    "yesno": "^0.4.0"
  },
  "dependencies": {
-    "@azure/core-util": "1.4.0",
-    "@angular/animations": "^11.2.12",
-    "@angular/cdk": "^11.2.12",
-    "@angular/common": "^11.2.12",
-    "@angular/compiler": "^11.2.12",
-    "@angular/core": "^11.2.12",
-    "@angular/forms": "^11.2.12",
-    "@angular/material": "^11.2.12",
-    "@angular/platform-browser": "^11.2.12",
-    "@angular/platform-browser-dynamic": "^11.2.12",
-    "@angular/platform-server": "^11.2.12",
-    "@angular/router": "^11.2.12",
+    "@angular/animations": "^12.0.0",
+    "@angular/cdk": "^12.0.0",
+    "@angular/common": "^12.0.0",
+    "@angular/compiler": "^12.0.0",
+    "@angular/core": "^12.0.0",
+    "@angular/forms": "^12.0.0",
+    "@angular/material": "^12.0.0",
+    "@angular/platform-browser": "^12.0.0",
+    "@angular/platform-browser-dynamic": "^12.0.0",
+    "@angular/platform-server": "^12.0.0",
+    "@angular/router": "^12.0.0",
    "@azure/bonito-core": "^1.0.0",
    "@azure/bonito-ui": "^1.0.0",
+    "@azure/core-util": "1.9.1",
    "@azure/msal-node": "^2.7.0",
-    "@azure/storage-blob": "^12.11.0",
+    "@azure/storage-blob": "^12.23.0",
    "@batch/ui-playground": "^1.0.0",
    "@batch/ui-react": "^1.0.0",
    "@batch/ui-service": "^1.0.0",
@ -236,16 +232,15 @@
    "reflect-metadata": "^0.1.13",
    "rxjs": "^6.6.7",
    "strip-json-comments": "^2.0.1",
-    "tinycolor2": "^1.4.1",
+    "tinycolor2": "^1.6.0",
    "winston": "^3.3.3",
    "winston-daily-rotate-file": "^3.10.0",
    "write-file-webpack-plugin": "^4.5.1",
    "xml2js": "^0.5.0",
-    "zone.js": "^0.11.0"
+    "zone.js": "^0.11.4"
  },
  "overrides": {
    "json5": "^2.2.3",
-    "ajv": "^6.12.6",
-    "@azure/core-util": "1.4.0"
+    "@azure/core-util": "1.9.1"
  }
 }
--- a/desktop/patches/@azure+core-util+1.4.0.patch
+++ b/desktop/patches/@azure+core-util+1.4.0.patch
@ -1,43 +0,0 @@
-diff --git a/node_modules/@azure/core-util/dist-esm/src/checkEnvironment.js b/node_modules/@azure/core-util/dist-esm/src/checkEnvironment.js
-index 5a89b5f..1c62028 100644
--- a/node_modules/@azure/core-util/dist-esm/src/checkEnvironment.js
-+++ b/node_modules/@azure/core-util/dist-esm/src/checkEnvironment.js
-@@ -17,7 +17,15 @@ export const isWebWorker = typeof self === "object" &&
- /**
-  * A constant that indicates whether the environment the code is running is Node.JS.
-  */
-export const isNode = typeof process !== "undefined" && Boolean(process.version) && Boolean((_d = process.versions) === null || _d === void 0 ? void 0 : _d.node);
-+// KLUDGE: @azure/storage-blob uses isNode variable exported from @azure/core-util to
-+// determine how it should process data. However, in the renderer process, isNode is
-+// set to be true, which causes @azure/storage-blob fails to process data. Thus we need
-+// to patch isNode to be false in the renderer process.
-+// github issue: https://github.com/Azure/azure-sdk-for-js/issues/21110
-+export const isNode =
-+    typeof process !== "undefined" &&
-+    !!process.env &&
-+    !process.env.RENDERER;
- /**
-  * A constant that indicates whether the environment the code is running is Deno.
-  */
-diff --git a/node_modules/@azure/core-util/dist/index.js b/node_modules/@azure/core-util/dist/index.js
-index 22d406a..b2f1205 100644
--- a/node_modules/@azure/core-util/dist/index.js
-+++ b/node_modules/@azure/core-util/dist/index.js
-@@ -268,7 +268,16 @@ const isWebWorker = typeof self === "object" &&
- /**
-  * A constant that indicates whether the environment the code is running is Node.JS.
-  */
-const isNode = typeof process !== "undefined" && Boolean(process.version) && Boolean((_d = process.versions) === null || _d === void 0 ? void 0 : _d.node);
-+// KLUDGE: @azure/storage-blob uses isNode variable exported from @azure/core-util to
-+// determine how it should process data. However, in the renderer process, isNode is
-+// set to be true, which causes @azure/storage-blob fails to process data. Thus we need
-+// to patch isNode to be false in the renderer process.
-+// github issue: https://github.com/Azure/azure-sdk-for-js/issues/21110
-+const isNode =
-+    typeof process !== "undefined" &&
-+    !!process.env &&
-+    !process.env.RENDERER;
-+
- /**
-  * A constant that indicates whether the environment the code is running is Deno.
-  */
--- a/desktop/patches/@azure+core-util+1.9.1.patch
+++ b/desktop/patches/@azure+core-util+1.9.1.patch
@ -0,0 +1,56 @@
+diff --git a/node_modules/@azure/core-util/dist/browser/checkEnvironment.js b/node_modules/@azure/core-util/dist/browser/checkEnvironment.js
+index b7feb20..2d280f2 100644
+--- a/node_modules/@azure/core-util/dist/browser/checkEnvironment.js
+++ b/node_modules/@azure/core-util/dist/browser/checkEnvironment.js
+@@ -29,7 +29,8 @@ export const isBun = typeof Bun !== "undefined" && typeof Bun.version !== "undef
+  */
+ export const isNodeLike = typeof globalThis.process !== "undefined" &&
+     Boolean(globalThis.process.version) &&
+-    Boolean((_d = globalThis.process.versions) === null || _d === void 0 ? void 0 : _d.node);
+    Boolean((_d = globalThis.process.versions) === null || _d === void 0 ? void 0 : _d.node) &&
+    !Boolean(process.env.RENDERER);
+ /**
+  * A constant that indicates whether the environment the code is running is a Node.js compatible environment.
+  * @deprecated Use `isNodeLike` instead.
+diff --git a/node_modules/@azure/core-util/dist/commonjs/checkEnvironment.js b/node_modules/@azure/core-util/dist/commonjs/checkEnvironment.js
+index 3822c2c..337b32a 100644
+--- a/node_modules/@azure/core-util/dist/commonjs/checkEnvironment.js
+++ b/node_modules/@azure/core-util/dist/commonjs/checkEnvironment.js
+@@ -32,7 +32,8 @@ exports.isBun = typeof Bun !== "undefined" && typeof Bun.version !== "undefined"
+  */
+ exports.isNodeLike = typeof globalThis.process !== "undefined" &&
+     Boolean(globalThis.process.version) &&
+-    Boolean((_d = globalThis.process.versions) === null || _d === void 0 ? void 0 : _d.node);
+    Boolean((_d = globalThis.process.versions) === null || _d === void 0 ? void 0 : _d.node) &&
+    !Boolean(process.env.RENDERER);
+ /**
+  * A constant that indicates whether the environment the code is running is a Node.js compatible environment.
+  * @deprecated Use `isNodeLike` instead.
+diff --git a/node_modules/@azure/core-util/dist/esm/checkEnvironment.js b/node_modules/@azure/core-util/dist/esm/checkEnvironment.js
+index b7feb20..2d280f2 100644
+--- a/node_modules/@azure/core-util/dist/esm/checkEnvironment.js
+++ b/node_modules/@azure/core-util/dist/esm/checkEnvironment.js
+@@ -29,7 +29,8 @@ export const isBun = typeof Bun !== "undefined" && typeof Bun.version !== "undef
+  */
+ export const isNodeLike = typeof globalThis.process !== "undefined" &&
+     Boolean(globalThis.process.version) &&
+-    Boolean((_d = globalThis.process.versions) === null || _d === void 0 ? void 0 : _d.node);
+    Boolean((_d = globalThis.process.versions) === null || _d === void 0 ? void 0 : _d.node) &&
+    !Boolean(process.env.RENDERER);
+ /**
+  * A constant that indicates whether the environment the code is running is a Node.js compatible environment.
+  * @deprecated Use `isNodeLike` instead.
+diff --git a/node_modules/@azure/core-util/dist/react-native/checkEnvironment.js b/node_modules/@azure/core-util/dist/react-native/checkEnvironment.js
+index b7feb20..2d280f2 100644
+--- a/node_modules/@azure/core-util/dist/react-native/checkEnvironment.js
+++ b/node_modules/@azure/core-util/dist/react-native/checkEnvironment.js
+@@ -29,7 +29,8 @@ export const isBun = typeof Bun !== "undefined" && typeof Bun.version !== "undef
+  */
+ export const isNodeLike = typeof globalThis.process !== "undefined" &&
+     Boolean(globalThis.process.version) &&
+-    Boolean((_d = globalThis.process.versions) === null || _d === void 0 ? void 0 : _d.node);
+    Boolean((_d = globalThis.process.versions) === null || _d === void 0 ? void 0 : _d.node) &&
+    !Boolean(process.env.RENDERER);
+ /**
+  * A constant that indicates whether the environment the code is running is a Node.js compatible environment.
+  * @deprecated Use `isNodeLike` instead.
--- a/desktop/scripts/lca/generate-third-party.ts
+++ b/desktop/scripts/lca/generate-third-party.ts
@ -2,7 +2,6 @@

 import { program } from "commander";
 import * as fs from "fs";
-import fetch, { HeaderInit } from "node-fetch";
 import * as path from "path";
 import { Constants } from "../../src/client/client-constants";

@ -147,7 +146,7 @@ async function loadLicense(dependency: Dependency, anonymous = false):
    const { repoUrl = null } = dependency;
    const repoName = getRepoName(repoUrl);
    const licenseUrl = `https://api.github.com/repos/${repoName}/license`;
-    const headers: HeaderInit = anonymous ? {} :
+    const headers: HeadersInit = anonymous ? {} :
        { Authorization: `token ${process.env.GH_TOKEN}` };

    return fetch(licenseUrl, { headers }).then(async (res) => {
--- a/desktop/scripts/publish/github-api.ts
+++ b/desktop/scripts/publish/github-api.ts
@ -1,4 +1,3 @@
-import fetch from "node-fetch";
 import { issuesUrl, milestoneIssuesUrl, milestoneUrl, pullRequestsUrl } from "./github-urls";
 import { Issue, Milestone } from "./models";

--- a/desktop/scripts/swagger/validate-models.ts
+++ b/desktop/scripts/swagger/validate-models.ts
@ -10,7 +10,6 @@ import "zone.js";

 console.log("Nodepath", process.env.NODE_PATH);
 import { Duration } from "luxon";
-import fetch from "node-fetch";
 import { metadataForCtr } from "../../src/@batch-flask/core/record/helpers";
 import * as models from "../../src/app/models";
 import { Constants } from "../../src/common";
@ -64,7 +63,7 @@ async function getSpecs() {
    const baseUrl = `https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/batch`;
    const url = `${baseUrl}/data-plane/Microsoft.Batch/stable/${dataPlaneVersion}/BatchService.json`;
    const response = await fetch(url);
-    return response.json();
+    return response.json() as unknown as { definitions: Record<string, any>; };
 }

 async function getMapping() {
--- a/desktop/src/@batch-flask/ui/form/complex-form/complex-form.component.ts
+++ b/desktop/src/@batch-flask/ui/form/complex-form/complex-form.component.ts
@ -1,5 +1,16 @@
 import {
-    AfterViewInit, ChangeDetectorRef, Component, ContentChildren, ElementRef, HostBinding, Input, OnChanges, QueryList, Type, ViewChild,
+    AfterViewInit,
+    ChangeDetectorRef,
+    Component,
+    ContentChildren,
+    ElementRef,
+    forwardRef,
+    HostBinding,
+    Input,
+    OnChanges,
+    QueryList,
+    Type,
+    ViewChild,
 } from "@angular/core";
 import { FormControl } from "@angular/forms";
 import { AsyncTask, Dto, ServerError, autobind } from "@batch-flask/core";
@ -69,7 +80,7 @@ export class ComplexFormComponent extends FormBase implements AfterViewInit, OnC

    @Input() @HostBinding("class.sticky-footer") public stickyFooter: boolean = true;

-    @ContentChildren(FormPageComponent) public pages: QueryList<FormPageComponent>;
+    @ContentChildren(forwardRef(() => FormPageComponent)) public pages: QueryList<FormPageComponent>;

    @ViewChild('formElement') formElement: ElementRef;

--- a/desktop/src/@batch-flask/ui/form/complex-form/footer/form-footer.component.ts
+++ b/desktop/src/@batch-flask/ui/form/complex-form/footer/form-footer.component.ts
@ -1,5 +1,5 @@
 import {
-    ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnDestroy, Output,
+    ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnChanges, OnDestroy, Output, forwardRef,
 } from "@angular/core";
 import { FormControl } from "@angular/forms";
 import { AsyncTask, ServerError } from "@batch-flask/core";
@ -68,7 +68,11 @@ export class FormFooterComponent implements OnChanges, OnDestroy {
    private _actionConfig: FormActionConfig;
    private _statusSub: Subscription;

-    constructor(public form: ComplexFormComponent, private changeDetector: ChangeDetectorRef) { }
+    public form: ComplexFormComponent;
+
+    constructor(@Inject(forwardRef(() => ComplexFormComponent)) form: ComplexFormComponent, private changeDetector: ChangeDetectorRef) {
+        this.form = form;
+    }

    public ngOnChanges(changes) {
        if (changes.currentPage) {
--- a/desktop/src/@batch-flask/ui/form/form-page/form-page.component.ts
+++ b/desktop/src/@batch-flask/ui/form/form-page/form-page.component.ts
@ -76,9 +76,12 @@ export class FormPageComponent implements OnChanges, AfterContentInit, OnDestroy
    public _statusSub: Subscription;
    private _valid = new BehaviorSubject(false);

+    private form: ComplexFormComponent;
+
    constructor(
-        @Inject(forwardRef(() => ComplexFormComponent)) private form: ComplexFormComponent,
+        @Inject(forwardRef(() => ComplexFormComponent)) form: ComplexFormComponent,
        private changeDetector: ChangeDetectorRef) {
+        this.form = form;  // Workaround for circular dep issues. See: https://github.com/angular/angular-cli/issues/14247#issuecomment-486582423
        this.valid = this._valid.asObservable();
    }

--- a/desktop/src/@batch-flask/ui/form/form.module.ts
+++ b/desktop/src/@batch-flask/ui/form/form.module.ts
@ -9,6 +9,7 @@ import { ServerErrorModule } from "@batch-flask/ui/server-error";
 import { ButtonsModule } from "../buttons";
 import { CopyableModule } from "../copyable";
 import { I18nUIModule } from "../i18n";
+import { FormPageComponent } from "./form-page";
 import { ComplexFormComponent } from "./complex-form";
 import { FormFooterComponent } from "./complex-form/footer";
 import { EditableTableModule } from "./editable-table";
@ -16,7 +17,6 @@ import { ExpandingTextareaComponent } from "./expanding-textarea";
 import { FormErrorComponent } from "./form-error";
 import { FormFieldComponent, FormFieldPrefixDirective, FormFieldSuffixDirective } from "./form-field";
 import { FormJsonEditorComponent } from "./form-json-editor";
-import { FormPageComponent } from "./form-page";
 import { FormMultiPickerComponent, FormPickerComponent, FormPickerItemTemplateDirective } from "./form-picker";
 import { FormSectionComponent } from "./form-section";
 import { HintComponent } from "./hint";
--- a/desktop/src/@batch-flask/ui/table/table.component.ts
+++ b/desktop/src/@batch-flask/ui/table/table.component.ts
@ -6,6 +6,7 @@ import {
    ContentChildren,
    ElementRef,
    EventEmitter,
+    forwardRef,
    HostBinding,
    HostListener,
    Input,
@ -80,7 +81,7 @@ export class TableComponent extends AbstractListBase implements AfterContentInit
    @Output() public dropOnRow = new EventEmitter<DropEvent>();

    @ViewChild(TableHeadComponent, { static: false }) public head: TableHeadComponent;
-    @ContentChildren(TableColumnComponent) public columnComponents: QueryList<TableColumnComponent>;
+    @ContentChildren(forwardRef(() => TableColumnComponent)) public columnComponents: QueryList<TableColumnComponent>;
    @HostBinding("class.drag-hover") public isDraging = 0;
    @HostBinding("class.activable") public get activable() {
        return this.config.activable;
--- a/desktop/src/app/components/account/details/programmatic-usage/programming-sample/samples/index.ts
+++ b/desktop/src/app/components/account/details/programmatic-usage/programming-sample/samples/index.ts
@ -1,17 +1,17 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 export const sampleTemplates = {
    sharedKey: {
-        python: require("raw-loader!./shared-key/python.py.template"),
-        csharp: require("raw-loader!./shared-key/csharp.cs.template"),
-        nodejs: require("raw-loader!./shared-key/node.js.template"),
-        doAzureParallel: require("raw-loader!./shared-key/doAzureParallel.json.template"),
+        python: require("./shared-key/python.py.template"),
+        csharp: require("./shared-key/csharp.cs.template"),
+        nodejs: require("./shared-key/node.js.template"),
+        doAzureParallel: require("./shared-key/doAzureParallel.json.template"),
    },
    aad: {
-        python: require("raw-loader!./aad/python.py.template"),
-        csharp: require("raw-loader!./aad/csharp.cs.template"),
-        nodejs: require("raw-loader!./aad/node.js.template"),
-        aztk: require("raw-loader!./aad/aztk.yaml.template"),
-        doAzureParallel: require("raw-loader!./aad/doAzureParallel.json.template"),
+        python: require("./aad/python.py.template"),
+        csharp: require("./aad/csharp.cs.template"),
+        nodejs: require("./aad/node.js.template"),
+        aztk: require("./aad/aztk.yaml.template"),
+        doAzureParallel: require("./aad/doAzureParallel.json.template"),
    },
 };

--- a/desktop/src/app/components/application/action/create/application-create-dialog.component.spec.ts
+++ b/desktop/src/app/components/application/action/create/application-create-dialog.component.spec.ts
@ -17,7 +17,7 @@ import * as TestConstants from "test/test-constants";
 import { validateControl } from "test/utils/helpers";
 import { MockedFile } from "test/utils/mocks";
 import { ServerErrorMockComponent, complexFormMockComponents } from "test/utils/mocks/components";
-import { isNode } from '@azure/core-http';
+import { isNode } from '@azure/core-util';

 describe("ApplicationCreateDialogComponent ", () => {
    let fixture: ComponentFixture<ApplicationCreateDialogComponent>;
--- a/desktop/src/app/components/job/graphs/all-job-graphs-home/all-job-graphs-home.scss
+++ b/desktop/src/app/components/job/graphs/all-job-graphs-home/all-job-graphs-home.scss
@ -3,7 +3,7 @@
 bl-all-job-graphs-home {
    $padding: 10px;
    $graph-header-height: 40px;
-    $graphs-content-height: calc(100% - #{$graph-header-height  + $padding * 2});
+    $graphs-content-height: calc(100% - #{$graph-header-height + $padding * 2});

    display: block;
    width: 100%;
--- a/desktop/src/app/components/misc/theme-colors/theme-colors.component.ts
+++ b/desktop/src/app/components/misc/theme-colors/theme-colors.component.ts
@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy } from "@angular/core";
 import { ThemeService } from "app/services";
 import { Subscription } from "rxjs";
-import * as tinycolor from "tinycolor2";
+import tinycolor from "tinycolor2";

 import "./theme-colors.scss";

--- a/desktop/src/app/services/azure-batch/certificate/certificate.service.ts
+++ b/desktop/src/app/services/azure-batch/certificate/certificate.service.ts
@ -185,6 +185,8 @@ export class CertificateService {
                const p12Der = forge.util.decode64(data);
                // Set parseAllBytes to false to avoid regression.
                // See: https://github.com/digitalbazaar/forge/issues/975
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore parseAllBytes is not in the @types/node-forge
                const p12Asn1 = forge.asn1.fromDer(p12Der, {parseAllBytes: false});
                const outCert = forge.pkcs12.pkcs12FromAsn1(p12Asn1, false, password);
                const keyBags = outCert.getBags({ bagType: forge.pki.oids.certBag });
@ -195,6 +197,8 @@ export class CertificateService {
            case CertificateFormat.cer:
                // Set parseAllBytes to false to avoid regression.
                // See: https://github.com/digitalbazaar/forge/issues/975
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore parseAllBytes is not in the @types/node-forge
                const outAsn1 = forge.asn1.fromDer(data, {parseAllBytes: false});
                certDer = forge.asn1.toDer(outAsn1).getBytes();
                break;
@ -203,6 +207,8 @@ export class CertificateService {
                    current certificate type is not supported.`);
        }
        const md = forge.md.sha1.create();
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore start is not in the @types/node-forge
        md.start();
        md.update(certDer);
        const digest = md.digest();
--- a/desktop/src/app/services/themes/theme.model.ts
+++ b/desktop/src/app/services/themes/theme.model.ts
@ -1,5 +1,5 @@
 import { CssColor, ThemeElement } from "app/services/themes/theme-core";
-import * as tinycolor from "tinycolor2";
+import tinycolor from "tinycolor2";
 import { ChartColors } from "./chart-colors";
 import { EntityColorDefinition, ThemeDefinition } from "./theme-definition.model";

--- a/desktop/src/client/core/storage/storage-blob-adapter.spec.ts
+++ b/desktop/src/client/core/storage/storage-blob-adapter.spec.ts
@ -1,5 +1,5 @@
 import { StorageBlobAdapter } from "./storage-blob-adapter";
-import { isNode } from "@azure/core-http";
+import { isNode } from "@azure/core-util";

 describe("StorageBlobAdapter", () => {
    let adapter: StorageBlobAdapter;
--- a/desktop/test/app/spec-runner.ts
+++ b/desktop/test/app/spec-runner.ts
@ -10,7 +10,11 @@ TestBed.initTestEnvironment(
    platformBrowserDynamicTesting(),
 );

-const webpackRequire: any = require;
+declare global {
+    interface NodeRequire {
+        context: any;
+    }
+}

 /*
 * Ok, this is kinda crazy. We can use the context method on
@ -21,11 +25,11 @@ const webpackRequire: any = require;
 * any file that ends with spec.ts and get its path. By passing in true
 * we say do this recursivelyf
 */
-const testContext = webpackRequire.context(".", true, /\.spec\.ts/);
-const testAppContext = webpackRequire.context("../../src/app", true, /\.spec\.ts/);
-const testCommonContext = webpackRequire.context("../../src/common", true, /\.spec\.ts/);
+const testContext = require.context(".", true, /\.spec\.ts/);
+const testAppContext = require.context("../../src/app", true, /\.spec\.ts/);
+const testCommonContext = require.context("../../src/common", true, /\.spec\.ts/);
 // Exclude the @batch-flask/compiler folder
-const testBlCommonContext = webpackRequire.context("../../src/@batch-flask", true,
+const testBlCommonContext = require.context("../../src/@batch-flask", true,
    /^\.\/(?!compiler)(?!.*node\.spec\.ts).*\.spec\.ts$/);

 /*
--- a/desktop/tsconfig.browser.json
+++ b/desktop/tsconfig.browser.json
@ -1,8 +1,13 @@
 {
  "extends": "./tsconfig.json",
+  "include": [
+    "src/app",
+    "src/@batch-flask/utils/logging",
+  ],
  "exclude": [
    "**/*.spec.ts",
    "src/test/**/*.ts",
+    "src/client",
    "test/**/*.ts",
    "**/testing**/*"
  ],
--- a/desktop/tsconfig.json
+++ b/desktop/tsconfig.json
@ -49,7 +49,7 @@
  "files": [
    "definitions/index.d.ts",
    "definitions/missing-defs.d.ts",
-    "node_modules/monaco-editor/monaco.d.ts"
+    "../node_modules/monaco-editor/monaco.d.ts"
  ],
  // This is not actually used for building but to let the editor know what files use this config
  "include": [
--- a/desktop/tsconfig.test.json
+++ b/desktop/tsconfig.test.json
@ -2,7 +2,7 @@
  "extends": "./tsconfig.json",
  "files": [
    "definitions/index.d.ts",
-    "node_modules/monaco-editor/monaco.d.ts"
+    "../node_modules/monaco-editor/monaco.d.ts"
  ],
  "include": [
    "app/**/*.ts",
--- a/packages/bonito-ui/package-lock.json
+++ b/packages/bonito-ui/package-lock.json
@ -12,8 +12,6 @@
        "@types/jest": "^27.0.1",
        "@types/jest-axe": "^3.5.1",
        "@types/node": "20.5.4",
-        "@types/react": "^17.0.53",
-        "@types/react-dom": "^17.0.18",
        "jest": "^27.1.0",
        "jest-axe": "^7.0.1",
        "jest-junit": "^12.2.0",
@ -1116,38 +1114,6 @@
      "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==",
      "dev": true
    },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.5",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "dev": true
-    },
-    "node_modules/@types/react": {
-      "version": "17.0.65",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.65.tgz",
-      "integrity": "sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/react-dom": {
-      "version": "17.0.20",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.20.tgz",
-      "integrity": "sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "^17"
-      }
-    },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
-      "dev": true
-    },
    "node_modules/@types/stack-utils": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@ -1682,12 +1648,6 @@
      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
      "dev": true
    },
-    "node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
-    },
    "node_modules/data-urls": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
--- a/packages/bonito-ui/package.json
+++ b/packages/bonito-ui/package.json
@ -79,8 +79,6 @@
    "@types/jest": "^27.0.1",
    "@types/jest-axe": "^3.5.1",
    "@types/node": "20.5.4",
-    "@types/react": "^17.0.53",
-    "@types/react-dom": "^17.0.18",
    "jest": "^27.1.0",
    "jest-axe": "^7.0.1",
    "jest-junit": "^12.2.0",
--- a/packages/playground/package-lock.json
+++ b/packages/playground/package-lock.json
@ -12,8 +12,6 @@
        "@types/jest": "^27.0.1",
        "@types/jest-axe": "^3.5.1",
        "@types/node": "20.5.4",
-        "@types/react": "^17.0.53",
-        "@types/react-dom": "^17.0.18",
        "jest": "^27.1.0",
        "jest-axe": "^7.0.1",
        "jest-junit": "^12.2.0",
@ -1115,38 +1113,6 @@
      "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==",
      "dev": true
    },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.5",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "dev": true
-    },
-    "node_modules/@types/react": {
-      "version": "17.0.65",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.65.tgz",
-      "integrity": "sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/react-dom": {
-      "version": "17.0.20",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.20.tgz",
-      "integrity": "sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "^17"
-      }
-    },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
-      "dev": true
-    },
    "node_modules/@types/stack-utils": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@ -1681,12 +1647,6 @@
      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
      "dev": true
    },
-    "node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
-    },
    "node_modules/data-urls": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@ -78,8 +78,6 @@
    "@types/jest": "^27.0.1",
    "@types/jest-axe": "^3.5.1",
    "@types/node": "20.5.4",
-    "@types/react": "^17.0.53",
-    "@types/react-dom": "^17.0.18",
    "jest": "^27.1.0",
    "jest-axe": "^7.0.1",
    "jest-junit": "^12.2.0",
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@ -12,8 +12,6 @@
        "@types/jest": "^27.0.1",
        "@types/jest-axe": "^3.5.1",
        "@types/node": "20.5.4",
-        "@types/react": "^17.0.53",
-        "@types/react-dom": "^17.0.18",
        "jest": "^27.1.0",
        "jest-axe": "^7.0.1",
        "jest-junit": "^12.2.0",
@ -1116,38 +1114,6 @@
      "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==",
      "dev": true
    },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.5",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "dev": true
-    },
-    "node_modules/@types/react": {
-      "version": "17.0.65",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.65.tgz",
-      "integrity": "sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/react-dom": {
-      "version": "17.0.20",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.20.tgz",
-      "integrity": "sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "^17"
-      }
-    },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
-      "dev": true
-    },
    "node_modules/@types/stack-utils": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@ -1682,12 +1648,6 @@
      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
      "dev": true
    },
-    "node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
-    },
    "node_modules/data-urls": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
--- a/packages/react/package.json
+++ b/packages/react/package.json
@ -82,8 +82,6 @@
    "@types/jest": "^27.0.1",
    "@types/jest-axe": "^3.5.1",
    "@types/node": "20.5.4",
-    "@types/react": "^17.0.53",
-    "@types/react-dom": "^17.0.18",
    "jest": "^27.1.0",
    "jest-axe": "^7.0.1",
    "jest-junit": "^12.2.0",
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -14,8 +14,6 @@
      "devDependencies": {
        "@types/jest": "^27.0.1",
        "@types/node": "20.5.4",
-        "@types/react": "^17.0.53",
-        "@types/react-dom": "^17.0.18",
        "@types/react-router-dom": "^5.1.7",
        "css-loader": "^6.8.1",
        "esbuild-loader": "^4.0.1",
@ -1661,15 +1659,6 @@
        "csstype": "^3.0.2"
      }
    },
-    "node_modules/@types/react-dom": {
-      "version": "17.0.20",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.20.tgz",
-      "integrity": "sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "^17"
-      }
-    },
    "node_modules/@types/react-router": {
      "version": "5.1.20",
      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
--- a/web/package.json
+++ b/web/package.json
@ -71,8 +71,6 @@
  "devDependencies": {
    "@types/jest": "^27.0.1",
    "@types/node": "20.5.4",
-    "@types/react": "^17.0.53",
-    "@types/react-dom": "^17.0.18",
    "@types/react-router-dom": "^5.1.7",
    "css-loader": "^6.8.1",
    "esbuild-loader": "^4.0.1",