diff --git a/config/env.js b/config/env.js
index ffa7e496a..a77c701ff 100644
--- a/config/env.js
+++ b/config/env.js
@@ -32,7 +32,7 @@ const dotenvFiles = [
 // https://github.com/motdotla/dotenv-expand
 dotenvFiles.forEach(dotenvFile => {
   if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
+    require('dotenv-expand').expand(
       require('dotenv').config({
         path: dotenvFile,
       })
diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js
index 8f6511481..f289650fe 100644
--- a/config/jest/cssTransform.js
+++ b/config/jest/cssTransform.js
@@ -5,7 +5,9 @@
 
 module.exports = {
   process() {
-    return 'module.exports = {};';
+    return {
+      code: `module.exports = {};`,
+    };
   },
   getCacheKey() {
     // The output is always the same.
diff --git a/config/jest/fileTransform.js b/config/jest/fileTransform.js
index aab67618c..6a94fdf0c 100644
--- a/config/jest/fileTransform.js
+++ b/config/jest/fileTransform.js
@@ -35,6 +35,8 @@ module.exports = {
       };`;
     }
 
-    return `module.exports = ${assetFilename};`;
+    return {
+      code: `module.exports = ${assetFilename};`
+    };
   },
 };
diff --git a/config/webpack.config.demo.js b/config/webpack.config.demo.js
index e07d0e961..8872b0067 100644
--- a/config/webpack.config.demo.js
+++ b/config/webpack.config.demo.js
@@ -455,6 +455,7 @@ module.exports = function (webpackEnv) {
                 ],
                 plugins: [
                   ["@babel/plugin-proposal-class-properties", { "loose": true }],
+                  ["@babel/plugin-proposal-private-methods", { "loose": true }],
                   ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
                 ],
                 cacheDirectory: true,
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 0993c822b..3d2c776a1 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -481,6 +481,7 @@ module.exports = function (webpackEnv) {
                 ],
                 plugins: [
                   ["@babel/plugin-proposal-class-properties", { "loose": true }],
+                  ["@babel/plugin-proposal-private-methods", { "loose": true }],
                   ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
                 ],
                 cacheDirectory: true,
diff --git a/config/webpackDevServer.config.js b/config/webpackDevServer.config.js
index 52f4edf36..312d67190 100644
--- a/config/webpackDevServer.config.js
+++ b/config/webpackDevServer.config.js
@@ -101,27 +101,22 @@ module.exports = function (proxy, allowedHost) {
     },
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
-    onBeforeSetupMiddleware(devServer) {
-      // Keep `evalSourceMapMiddleware`
-      // middlewares before `redirectServedPath` otherwise will not have any effect
-      // This lets us fetch source contents from webpack for the error overlay
-      devServer.app.use(evalSourceMapMiddleware(devServer));
+    setupMiddlewares: (middlewares, devServer) => {
+        if (!devServer) {
+            throw new Error('webpack-dev-server is not defined')
+        }
 
-      if (fs.existsSync(paths.proxySetup)) {
-        // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(devServer.app);
-      }
-    },
-    onAfterSetupMiddleware(devServer) {
-      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
-      devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
+        if (fs.existsSync(paths.proxySetup)) {
+            require(paths.proxySetup)(devServer.app)
+        }
+
+        middlewares.push(
+            evalSourceMapMiddleware(devServer),
+            redirectServedPath(paths.publicUrlOrPath),
+            noopServiceWorkerMiddleware(paths.publicUrlOrPath)
+        )
 
-      // This service worker file is effectively a 'no-op' that will reset any
-      // previous service worker registered for the same host:port combination.
-      // We do this in development to avoid hitting the production cache if
-      // it used the same host and port.
-      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+        return middlewares;
     },
   };
 };
diff --git a/package.json b/package.json
index 103c6b1a1..e88145353 100644
--- a/package.json
+++ b/package.json
@@ -43,8 +43,8 @@
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "css-loader": "^6.7.3",
     "css-minimizer-webpack-plugin": "^5.0.0",
-    "dotenv": "^16.0.2",
-    "dotenv-expand": "^5.1.0",
+    "dotenv": "^16.0.3",
+    "dotenv-expand": "^10.0.0",
     "eslint": "^8.38.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-webpack-plugin": "^4.0.1",
@@ -52,9 +52,10 @@
     "fs-extra": "^11.1.1",
     "html-webpack-plugin": "^5.5.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.4.3",
+    "jest": "^29.5.0",
     "jest-resolve": "^29.5.0",
-    "jest-watch-typeahead": "^2.1.1",
+    "jest-watch-typeahead": "^2.2.2",
+    "jest-environment-jsdom": "^29.5.0",
     "mini-css-extract-plugin": "^2.7.5",
     "postcss": "^8.4.22",
     "postcss-flexbugs-fixes": "^5.0.2",
@@ -165,6 +166,12 @@
           "loose": true
         }
       ],
+      [
+        "@babel/plugin-proposal-private-methods",
+        {
+          "loose": true
+        }
+      ],
       [
         "@babel/plugin-proposal-private-property-in-object",
         {