fix: Upgrade packages

app/client/config/webpackDevServer.config.js

@@ -89,7 +89,21 @@ module.exports = function (proxy, allowedHost) {
       publicPath: paths.publicUrlOrPath.slice(0, -1),
     },
 
-    https: getHttpsConfig(),
+    // Determine server protocol (http/https) per WDS v5 `server` option
+    server: (() => {
+      const httpsConfig = getHttpsConfig();
+      if (httpsConfig) {
+        if (typeof httpsConfig === "object") {
+          return {
+            type: "https",
+            options: httpsConfig,
+          };
+        }
+        // boolean true means use basic https
+        return "https";
+      }
+      return "http";
+    })(),
     host,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
@@ -99,27 +113,23 @@ 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) {
+      // ------------------------------
+      // Replaces deprecated onBeforeSetupMiddleware and onAfterSetupMiddleware.
+      // For details see: https://github.com/webpack/webpack-dev-server/blob/master/migration-v5.md
+      // ------------------------------
+      // Equivalent of previous onBeforeSetupMiddleware
+      middlewares.unshift(evalSourceMapMiddleware(devServer));
 
       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));
 
-      // 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));
+      // Equivalent of previous onAfterSetupMiddleware (executed last)
+      middlewares.push(redirectServedPath(paths.publicUrlOrPath));
+      middlewares.push(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+
+      return middlewares;
     },
   };
 };

app/client/jest.config.js

@@ -39,7 +39,7 @@ module.exports = {
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "css"],
   moduleDirectories: ["node_modules", "src", "test"],
   transformIgnorePatterns: [
-    "<rootDir>/node_modules/(?!codemirror|konva|react-dnd|dnd-core|@babel|(@blueprintjs)|@github|lodash-es|@draft-js-plugins|react-documents|linkedom|assert-never|axios|usehooks-ts|date-fns)",
+    "<rootDir>/node_modules/(?!codemirror|konva|react-dnd|dnd-core|@babel|(@blueprintjs)|@github|lodash-es|@draft-js-plugins|react-documents|linkedom|assert-never|axios|usehooks-ts|date-fns|nanoid)",
   ],
   moduleNameMapper: {
     "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",

app/client/package.json

@@ -157,7 +157,7 @@
     "moment": "2.29.4",
     "moment-timezone": "^0.5.35",
     "mutative": "^1.1.0",
-    "nanoid": "^2.0.4",
+    "nanoid": "3.3.11",
     "node-forge": "^1.3.0",
     "object-hash": "^3.0.0",
     "openai": "4.87.3",
@@ -270,7 +270,6 @@
     "@types/lodash": "^4.14.120",
     "@types/mixpanel-browser": "^2.50.1",
     "@types/moment-timezone": "^0.5.10",
-    "@types/nanoid": "^2.0.0",
     "@types/node": "^10.12.18",
     "@types/node-fetch": "^2.6.11",
     "@types/node-forge": "^0.10.0",
@@ -392,7 +391,7 @@
     "ts-jest-mock-import-meta": "^0.12.0",
     "ts-node": "^10.9.1",
     "webpack": "^5.98.0",
-    "webpack-dev-server": "^4.6.0",
+    "webpack-dev-server": "5.2.2",
     "webpack-manifest-plugin": "^4.0.2",
     "webpack-retry-chunk-load-plugin": "^3.1.1",
     "workbox-webpack-plugin": "^7.3.0",
@@ -425,6 +424,7 @@
     "@types/react": "^17.0.2",
     "postcss": "8.4.31",
     "axios": "^1.8.3",
-    "esbuild": "^0.25.1"
+    "esbuild": "^0.25.1",
+    "path-to-regexp@^1.7.0": "1.9.0"
   }
-}
+}

app/client/packages/dsl/src/migrate/utils.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import generate from "nanoid/generate";
+import { customAlphabet } from "nanoid";
 import type { DSLWidget, WidgetProps } from "./types";
 import { isString } from "lodash";
 
@@ -11,7 +11,7 @@ const ALPHANUMERIC = "1234567890abcdefghijklmnopqrstuvwxyz";
 export const generateReactKey = ({
   prefix = "",
 }: { prefix?: string } = {}): string => {
-  return prefix + generate(ALPHANUMERIC, 10);
+  return prefix + customAlphabet(ALPHANUMERIC, 10)();
 };
 
 export const removeSpecialChars = (value: string, limit?: number) => {

app/client/packages/storybook/package.json

@@ -32,7 +32,7 @@
     "@vitejs/plugin-react": "^4.3.1",
     "chromatic": "^11.3.0",
     "storybook": "8.2.7",
-    "vite": "^6.2.6",
+    "vite": "^6.2.7",
     "vite-plugin-svgr": "^4.2.0"
   },
   "dependencies": {

app/client/scripts/start.js

@@ -1,38 +1,38 @@
-'use strict';
+"use strict";
 
 // Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
+process.env.BABEL_ENV = "development";
+process.env.NODE_ENV = "development";
 
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
+process.on("unhandledRejection", (err) => {
   throw err;
 });
 
 // Ensure environment variables are read.
-require('../config/env');
+require("../config/env");
 
-const fs = require('fs');
-const chalk = require('react-dev-utils/chalk');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const clearConsole = require('react-dev-utils/clearConsole');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const fs = require("fs");
+const chalk = require("react-dev-utils/chalk");
+const webpack = require("webpack");
+const WebpackDevServer = require("webpack-dev-server");
+const clearConsole = require("react-dev-utils/clearConsole");
+const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles");
 const {
   choosePort,
   createCompiler,
   prepareProxy,
   prepareUrls,
-} = require('react-dev-utils/WebpackDevServerUtils');
-const openBrowser = require('react-dev-utils/openBrowser');
-const semver = require('semver');
-const paths = require('../config/paths');
-const configFactory = require('../config/webpack.config');
-const createDevServerConfig = require('../config/webpackDevServer.config');
-const getClientEnvironment = require('../config/env');
-const react = require(require.resolve('react', { paths: [paths.appPath] }));
+} = require("react-dev-utils/WebpackDevServerUtils");
+const openBrowser = require("react-dev-utils/openBrowser");
+const semver = require("semver");
+const paths = require("../config/paths");
+const configFactory = require("../config/webpack.config");
+const createDevServerConfig = require("../config/webpackDevServer.config");
+const getClientEnvironment = require("../config/env");
+const react = require(require.resolve("react", { paths: [paths.appPath] }));
 
 const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
 const useYarn = fs.existsSync(paths.yarnLockFile);
@@ -45,50 +45,50 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 
 // Tools like Cloud9 rely on this.
 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
-const HOST = process.env.HOST || '0.0.0.0';
+const HOST = process.env.HOST || "0.0.0.0";
 
 if (process.env.HOST) {
   console.log(
     chalk.cyan(
       `Attempting to bind to HOST environment variable: ${chalk.yellow(
-        chalk.bold(process.env.HOST)
-      )}`
-    )
+        chalk.bold(process.env.HOST),
+      )}`,
+    ),
   );
   console.log(
-    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
+    `If this was unintentional, check that you haven't mistakenly set it in your shell.`,
   );
   console.log(
-    `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
+    `Learn more here: ${chalk.yellow("https://cra.link/advanced-config")}`,
   );
   console.log();
 }
 
 // We require that you explicitly set browsers and do not fall back to
 // browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+const { checkBrowsers } = require("react-dev-utils/browsersHelper");
 checkBrowsers(paths.appPath, isInteractive)
   .then(() => {
     // We attempt to use the default port but if it is busy, we offer the user to
     // run on a different port. `choosePort()` Promise resolves to the next free port.
     return choosePort(HOST, DEFAULT_PORT);
   })
-  .then(port => {
+  .then((port) => {
     if (port == null) {
       // We have not found a port.
       return;
     }
 
-    const config = configFactory('development');
-    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const config = configFactory("development");
+    const protocol = process.env.HTTPS === "true" ? "https" : "http";
     const appName = require(paths.appPackageJson).name;
 
     const useTypeScript = fs.existsSync(paths.appTsConfig);
     const urls = prepareUrls(
       protocol,
       HOST,
       port,
-      paths.publicUrlOrPath.slice(0, -1)
+      paths.publicUrlOrPath.slice(0, -1),
     );
     // Create a webpack compiler that is configured with custom messages.
     const compiler = createCompiler({
@@ -104,7 +104,7 @@ checkBrowsers(paths.appPath, isInteractive)
     const proxyConfig = prepareProxy(
       proxySetting,
       paths.appPublic,
-      paths.publicUrlOrPath
+      paths.publicUrlOrPath,
     );
     // Serve webpack assets generated by the compiler over a web server.
     const serverConfig = {
@@ -119,34 +119,34 @@ checkBrowsers(paths.appPath, isInteractive)
         clearConsole();
       }
 
-      if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
+      if (env.raw.FAST_REFRESH && semver.lt(react.version, "16.10.0")) {
         console.log(
           chalk.yellow(
-            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
-          )
+            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`,
+          ),
         );
       }
 
-      console.log(chalk.cyan('Starting the development server...\n'));
+      console.log(chalk.cyan("Starting the development server...\n"));
       openBrowser(urls.localUrlForBrowser);
     });
 
-    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
+    ["SIGINT", "SIGTERM"].forEach(function (sig) {
       process.on(sig, function () {
-        devServer.close();
-        process.exit();
+        console.log(chalk.yellow("Stopping the development server..."));
+        devServer.stop().then(() => process.exit());
       });
     });
 
-    if (process.env.CI !== 'true') {
+    if (process.env.CI !== "true") {
       // Gracefully exit when stdin ends
-      process.stdin.on('end', function () {
-        devServer.close();
-        process.exit();
+      process.stdin.on("end", function () {
+        console.log(chalk.yellow("Stopping the development server..."));
+        devServer.stop().then(() => process.exit());
       });
     }
   })
-  .catch(err => {
+  .catch((err) => {
     if (err && err.message) {
       console.log(err.message);
     }

app/client/src/instrumentation/utils.ts

@@ -5,7 +5,7 @@ import {
   osName,
   osVersion,
 } from "react-device-detect";
-import nanoid from "nanoid";
+import { nanoid } from "nanoid";
 import memoizeOne from "memoize-one";
 import { getApplicationParamsFromUrl } from "ee/utils/serviceWorkerUtils";
 import { getAppsmithConfigs } from "ee/configs";

app/client/src/usagePulse/utils.ts

@@ -1,7 +1,7 @@
 import { isEditorPath } from "ee/pages/Editor/Explorer/helpers";
 import { APP_MODE } from "entities/App";
 import { isNil } from "lodash";
-import nanoid from "nanoid";
+import { nanoid } from "nanoid";
 import { getAppMode } from "ee/selectors/entitiesSelector";
 import store from "store";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
@@ -72,7 +72,7 @@ export const getUsagePulsePayload = (
       let fallback = localStorage.getItem(FALLBACK_KEY);
 
       if (!fallback) {
-        fallback = nanoid() as string;
+        fallback = nanoid();
         localStorage.setItem(FALLBACK_KEY, fallback);
       }
 

app/client/src/utils/generators.tsx

@@ -1,5 +1,5 @@
 import type { WidgetType } from "constants/WidgetConstants";
-import generate from "nanoid/generate";
+import { customAlphabet } from "nanoid";
 import { getBaseWidgetClassName } from "../constants/componentClassNameConstants";
 
 const ALPHANUMERIC = "1234567890abcdefghijklmnopqrstuvwxyz";
@@ -8,7 +8,7 @@ const ALPHANUMERIC = "1234567890abcdefghijklmnopqrstuvwxyz";
 export const generateReactKey = ({
   prefix = "",
 }: { prefix?: string } = {}): string => {
-  return prefix + generate(ALPHANUMERIC, 10);
+  return prefix + customAlphabet(ALPHANUMERIC, 10)();
 };
 
 // Before you change how this works

app/client/src/widgets/WidgetUtils.ts

@@ -21,7 +21,7 @@ import {
   WIDGET_PADDING,
 } from "constants/WidgetConstants";
 import { find, isArray, isEmpty } from "lodash";
-import generate from "nanoid/generate";
+import { customAlphabet } from "nanoid";
 import { createGlobalStyle, css } from "styled-components";
 import tinycolor from "tinycolor2";
 import type { DynamicPath } from "utils/DynamicBindingUtils";
@@ -117,7 +117,7 @@ const ALPHANUMERIC = "1234567890abcdefghijklmnopqrstuvwxyz";
 export const generateReactKey = ({
   prefix = "",
 }: { prefix?: string } = {}): string => {
-  return prefix + generate(ALPHANUMERIC, 10);
+  return prefix + customAlphabet(ALPHANUMERIC, 10)();
 };
 
 export const getCustomTextColor = (theme: Theme, backgroundColor?: string) => {