Eliminate dozens of deprecation and security vulnerability warnings with incremental package updates

.browserslistrc

@@ -1,12 +1,11 @@
-last 2 major versions
-not <= 0.5%
-not dead
-# No WebRTC support (including datachannel
-not ios_saf < 11
-not safari < 11
+# Modern browsers - macOS 10.15 (Safari 15.6, 2012 MacBook compat) and iOS 15.8 (Safari 15.8 iPhone 8 compat) minimum
+chrome >= 91 # This was the version of Chrome on Oculus Go devices when their support was sunset
+safari >= 15
+ios >= 15
+firefox >= 91  # Lowered to align with Safari 15 capabilities, bump to 115 (Wolvic on HTC) when possible
+edge >= 91
+# Exclude legacy browsers
 not ie >= 0
-not edge >= 0
 not ie_mob >= 0
 not and_uc >= 0
-# No WebGL or WebRTC support
 not op_mini all

.eslintrc.js

@@ -62,5 +62,5 @@ module.exports = {
     ],
     "@calm/react-intl/missing-values": "error"
   },
-  extends: ["prettier", "plugin:react/recommended", "eslint:recommended", "plugin:storybook/recommended"]
+  extends: ["prettier", "plugin:react/recommended", "eslint:recommended"]
 };

.github/workflows/browser-stack.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Setup node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 22.x
 
       - name: Run browser-stack test
         env:

.github/workflows/test-and-deploy-storybook.yml

@@ -14,7 +14,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 22
 
       - run: npm ci
       - run: npm test

.nvmrc

@@ -0,0 +1 @@
+24

.storybook/main.js

@@ -23,7 +23,10 @@ module.exports = {
               localIdentName: "[name]__[local]__[hash:base64:5]",
               exportLocalsConvention: "camelCase",
               // TODO we ideally would be able to get rid of this but we have some global styles and many :local's that would become superfluous
-              mode: "global"
+              mode: "global",
+              // Restore default export behavior for css-loader 7 compatibility
+              namedExport: false,
+              exportOnlyLocals: false
             }
           }
         },

.storybook/preview.js

@@ -8,6 +8,41 @@ import { themes } from "../src/utils/theme";
 import { useTheme } from "../src/react-components/styles/theme";
 import "../src/react-components/styles/global.scss";
 
+// Add debug styles for storybook to help visualize components
+const debugStyles = `
+  /* Make room layout container visible */
+  [class*="roomLayout"] {
+    background: #f5f5f5;
+    min-height: 500px;
+  }
+
+  /* Make viewport areas visible */
+  [class*="viewport"] {
+    background: rgba(200, 220, 255, 0.1);
+    border: 1px dashed #ccc;
+    min-height: 400px;
+  }
+
+  /* Ensure absolutely positioned elements are visible */
+  [class*="contentMenu"] {
+    background: rgba(255, 255, 255, 0.9) !important;
+    border: 2px solid #333 !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
+  }
+
+  [class*="spectatingLabel"] {
+    background: rgba(0, 0, 0, 0.8) !important;
+    padding: 8px !important;
+    border-radius: 4px !important;
+  }
+`;
+
+if (typeof document !== 'undefined') {
+  const style = document.createElement('style');
+  style.textContent = debugStyles;
+  document.head.appendChild(style);
+}
+
 const Layout = ({ children, locale, theme }) => {
   useTheme(theme);
 

.vscode/settings.json

@@ -17,5 +17,6 @@
   },
   "[html]": {
     "editor.defaultFormatter": "vscode.html-language-features" // Set to esbenp.prettier-vscode when we are ready to reformat all HTML files
-  }
+  },
+  "i18n-ally.localesPaths": ["src/assets/locales"]
 }

CONTRIBUTING.md

@@ -74,7 +74,7 @@ Getting set up to work on the Hubs client main fork is a little different than w
 
 ### 0. Dependencies
 
-[Install NodeJS](https://nodejs.org) if you haven't already. We use version 16.16.0 on our build servers. If you work on multiple javascript projects it may be useful to use something like [NVM](https://github.com/nvm-sh/nvm) to manage multiple versions of node for you.
+[Install NodeJS](https://nodejs.org) if you haven't already. We require Node.js 22 or higher. If you work on multiple javascript projects it may be useful to use something like [NVM](https://github.com/nvm-sh/nvm) to manage multiple versions of node for you.
 
 ### 1. Setting up the Repository
 
@@ -83,7 +83,7 @@ Clone the Hubs repository and install the npm dependencies.
 ```bash
 git clone https://github.com/Hubs-Foundation/hubs.git
 cd hubs
-# nvm use v16.16.0 # if using NVM
+# nvm use v22 # if using NVM
 npm ci
 ```
 

README.md

@@ -16,14 +16,14 @@ If you just want to check out how Hubs works and make your own modifications con
 
 ### Quick Start
 
-[Install NodeJS](https://nodejs.org) if you haven't already. We use 16.16.0 on our build servers. If you work on multiple javascript projects it may be useful to use something like [NVM](https://github.com/nvm-sh/nvm) to manage multiple versions of node for you.
+[Install NodeJS](https://nodejs.org) if you haven't already. We require Node.js 22 or higher. If you work on multiple javascript projects it may be useful to use something like [NVM](https://github.com/nvm-sh/nvm) to manage multiple versions of node for you.
 
 Run the following commands:
 
 ```bash
 git clone https://github.com/Hubs-Foundation/hubs.git
 cd hubs
-# nvm use v16.16.0 # if using NVM
+# nvm use v22 # if using NVM
 npm ci
 npm run dev
 ```

RetPageOriginDockerfile

@@ -4,6 +4,8 @@
 ###
 from node:22 as builder
 env QT_QPA_PLATFORM offscreen
+# Enable webpack detailed stats
+env WEBPACK_STATS=verbose
 # Detect architecture and install PhantomJS manually from Ubuntu archive
 run apt update && apt -y install wget && \
     ARCH=$(dpkg --print-architecture) && \
@@ -23,8 +25,34 @@ copy admin/package-lock.json admin/
 run cd admin && npm ci --legacy-peer-deps && cd ..
 copy . .
 env BASE_ASSETS_PATH="{{rawhubs-base-assets-path}}"
-run npm run build 1> /dev/null
-run cd admin && npm run build 1> /dev/null && cp -R dist/* ../dist && cd ..
+# Print diagnostic information
+run echo "Node version: $(node --version)" && \
+    echo "NPM version: $(npm --version)" && \
+    echo "Memory info:" && cat /proc/meminfo | grep -E "MemTotal|MemFree|MemAvailable" && \
+    echo "Disk space:" && df -h /
+# Build with verbose output and capture errors
+# Note: The Babel deoptimization warning about pdf.js exceeding 500KB is expected and not the actual error
+run echo "Starting main build..." && \
+    npm run build -- --stats=detailed --stats-children --stats-error-details 2>&1 | tee /build-main.log || \
+    (echo "==== BUILD FAILED ====" && \
+     echo "Last 100 lines of build output:" && \
+     tail -100 /build-main.log && \
+     echo "==== Package versions ====" && \
+     npm list --depth=0 && \
+     echo "==== Webpack config check ====" && \
+     npx webpack configtest && \
+     exit 1)
+# Build admin with verbose output  
+run echo "Starting admin build..." && \
+    cd admin && \
+    npm run build -- --stats-children --stats-error-details 2>&1 | tee /build-admin.log || \
+    (echo "==== ADMIN BUILD FAILED ====" && \
+     echo "Last 100 lines of admin build output:" && \
+     tail -100 /build-admin.log && \
+     echo "==== Admin package versions ====" && \
+     npm list --depth=0 && \
+     exit 1) && \
+    cp -R dist/* ../dist && cd ..
 run mkdir -p dist/pages && mv dist/*.html dist/pages && mv dist/hub.service.js dist/pages && mv dist/schema.toml dist/pages          
 run mkdir /hubs/rawhubs && mv dist/pages /hubs/rawhubs && mv dist/assets /hubs/rawhubs && mv dist/favicon.ico /hubs/rawhubs/pages
 

admin/babel.config.js

@@ -0,0 +1,21 @@
+// Custom babel config for admin that avoids core-js conflicts
+module.exports = {
+  sourceMaps: true,
+  presets: [
+    "@babel/react",
+    [
+      "@babel/env",
+      {
+        // Don't inject core-js polyfills automatically
+        useBuiltIns: false,
+        loose: true
+      }
+    ],
+    "@babel/typescript"
+  ],
+  plugins: [
+    "formatjs",
+    ["@babel/plugin-transform-private-property-in-object", { loose: true }],
+    ["@babel/plugin-transform-private-methods", { loose: true }]
+  ]
+};