Upgrade to Node 22 as 20 is EOL (#355)

Upgrade http-proxy-middleware to support v22 (new HPM version had several breaking changes to address)

Author: cigamit

awx/ui/config/webpackDevServer.config.js

@@ -13,7 +13,8 @@ const sockHost = process.env.WDS_SOCKET_HOST;
 const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
 const sockPort = process.env.WDS_SOCKET_PORT;
 
-module.exports = function (proxy, allowedHost) {
+module.exports = function (proxy, allowedHost, proxyOptions = {}) {
+  const { createProxyMiddleware } = proxyOptions;
   const disableFirewall =
     !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
   return {
@@ -111,7 +112,7 @@ module.exports = function (proxy, allowedHost) {
 
       if (fs.existsSync(paths.proxySetup)) {
         // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(devServer.app);
+        require(paths.proxySetup)(devServer.app, createProxyMiddleware);
       }
 
       // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match

awx/ui/package-lock.json

@@ -3,7 +3,7 @@
   "homepage": ".",
   "private": true,
   "engines": {
-    "node": ">=20.19.0"
+    "node": ">=22.19.0"
   },
   "dependencies": {
     "@lingui/react": "^5.4.0",
@@ -82,7 +82,7 @@
     "file-loader": "^6.2.0",
     "fs-extra": "^11.3.5",
     "html-webpack-plugin": "^5.6.7",
-    "http-proxy-middleware": "3.0.5",
+    "http-proxy-middleware": "4.0.0",
     "inject-manifest-plugin": "^0.6.5",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.3.0",

awx/ui/package.json

@@ -68,12 +68,12 @@ if (process.env.HOST) {
 // browserslist defaults.
 const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 checkBrowsers(paths.appPath, isInteractive)
-  .then(() => {
+  .then(async () => {
     // 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(async port => {
     if (port == null) {
       // We have not found a port.
       return;
@@ -106,9 +106,12 @@ checkBrowsers(paths.appPath, isInteractive)
       paths.appPublic,
       paths.publicUrlOrPath
     );
+    const { createProxyMiddleware } = await import('http-proxy-middleware');
     // Serve webpack assets generated by the compiler over a web server.
     const serverConfig = {
-      ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
+      ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig, {
+        createProxyMiddleware,
+      }),
       host: HOST,
       port,
     };

awx/ui/scripts/start.js

@@ -1,10 +1,13 @@
-const { legacyCreateProxyMiddleware } = require('http-proxy-middleware');
-
 const TARGET = process.env.TARGET || 'https://localhost:8043';
 
-module.exports = (app) => {
+module.exports = (app, createProxyMiddleware) => {
+  if (typeof createProxyMiddleware !== 'function') {
+    throw new Error('createProxyMiddleware must be provided to setupProxy');
+  }
+
   app.use(
-    legacyCreateProxyMiddleware(['/api', '/websocket', '/sso'], {
+    createProxyMiddleware({
+      pathFilter: ['/api', '/websocket', '/sso'],
       target: TARGET,
       secure: false,
       ws: true,

awx/ui/src/setupProxy.js

@@ -27,7 +27,7 @@ USER root
 RUN dnf -y update && dnf install -y 'dnf-command(config-manager)' && \
     dnf config-manager --set-enabled crb && \
     dnf module reset nodejs -y && \
-    dnf module enable nodejs:20 -y && \
+    dnf module enable nodejs:22 -y && \
     dnf -y install \
     iputils \
     gcc \
@@ -40,6 +40,7 @@ RUN dnf -y update && dnf install -y 'dnf-command(config-manager)' && \
     make \
 {% if not headless|bool %}
     nodejs \
+    npm \
 {% endif %}
     nss \
     openldap-devel \
@@ -149,7 +150,7 @@ RUN pip3.12 install --no-cache-dir -vv virtualenv supervisor dumb-init build &&
 {% if (build_dev|bool) or (kube_dev|bool) %}
 # Install development/test requirements
 RUN dnf module reset nodejs -y && \
-    dnf module enable nodejs:20 -y && \
+    dnf module enable nodejs:22 -y && \
     dnf -y install \
     crun \
     gdb \
@@ -167,6 +168,7 @@ RUN dnf module reset nodejs -y && \
     libpq-devel \
     nodejs \
     nss \
+    npm \
     make \
     patch \
     socat \