Update Deps.

config/webpackDevServer.config.js

@@ -1,16 +1,15 @@
-'use strict';
+"use strict";
 
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
-const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
-const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
-const ignoredFiles = require('react-dev-utils/ignoredFiles');
-const paths = require('./paths');
-const fs = require('fs');
+const errorOverlayMiddleware = require("react-dev-utils/errorOverlayMiddleware");
+const evalSourceMapMiddleware = require("react-dev-utils/evalSourceMapMiddleware");
+const ignoredFiles = require("react-dev-utils/ignoredFiles");
+const paths = require("./paths");
+const fs = require("fs");
 
-const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-const host = process.env.HOST || '0.0.0.0';
+const protocol = process.env.HTTPS === "true" ? "https" : "http";
+const host = process.env.HOST || "0.0.0.0";
 
-module.exports = function(proxy, allowedHost) {
+module.exports = function(proxy, allowedHost, port) {
   return {
     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
     // websites from potentially accessing local content through DNS rebinding:
@@ -28,77 +27,71 @@ module.exports = function(proxy, allowedHost) {
     // So we will disable the host check normally, but enable it if you have
     // specified the `proxy` setting. Finally, we let you override it if you
     // really know what you're doing with a special environment variable.
-    disableHostCheck:
-      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+    allowedHosts:
+      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === "true"
+        ? "all"
+        : "auto",
     // Enable gzip compression of generated files.
     compress: true,
-    // Silence WebpackDevServer's own logs since they're generally not useful.
-    // It will still show compile warnings and errors with this setting.
-    clientLogLevel: 'none',
-    // By default WebpackDevServer serves physical files from current directory
-    // in addition to all the virtual build products that it serves from memory.
-    // This is confusing because those files won’t automatically be available in
-    // production build folder unless we copy them. However, copying the whole
-    // project directory is dangerous because we may expose sensitive files.
-    // Instead, we establish a convention that only files in `public` directory
-    // get served. Our build script will copy `public` into the `build` folder.
-    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-    // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-    // Note that we only recommend to use `public` folder as an escape hatch
-    // for files like `favicon.ico`, `manifest.json`, and libraries that are
-    // for some reason broken when imported through Webpack. If you just want to
-    // use an image, put it in `src` and `import` it from JavaScript instead.
-    contentBase: paths.appPublic,
-    // By default files from `contentBase` will not trigger a page reload.
-    watchContentBase: true,
-    // Enable hot reloading server. It will provide /sockjs-node/ endpoint
-    // for the WebpackDevServer client so it can learn when the files were
-    // updated. The WebpackDevServer client is included as an entry point
-    // in the Webpack development configuration. Note that only changes
-    // to CSS are currently hot reloaded. JS changes will refresh the browser.
-    hot: true,
-    // It is important to tell WebpackDevServer to use the same "root" path
-    // as we specified in the config. In development, we always serve from /.
-    publicPath: '/',
-    // WebpackDevServer is noisy by default so we emit custom message instead
-    // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
-    quiet: true,
     // Reportedly, this avoids CPU overload on some systems.
     // https://github.com/facebook/create-react-app/issues/293
     // src/node_modules is not ignored to support absolute imports
     // https://github.com/facebook/create-react-app/issues/1065
-    watchOptions: {
-      ignored: ignoredFiles(paths.appSrc),
+    static: {
+      // By default WebpackDevServer serves physical files from current directory
+      // in addition to all the virtual build products that it serves from memory.
+      // This is confusing because those files won’t automatically be available in
+      // production build folder unless we copy them. However, copying the whole
+      // project directory is dangerous because we may expose sensitive files.
+      // Instead, we establish a convention that only files in `public` directory
+      // get served. Our build script will copy `public` into the `build` folder.
+      // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+      // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+      // Note that we only recommend to use `public` folder as an escape hatch
+      // for files like `favicon.ico`, `manifest.json`, and libraries that are
+      // for some reason broken when imported through Webpack. If you just want to
+      // use an image, put it in `src` and `import` it from JavaScript instead.
+      directory: paths.appPublic,
+      // It is important to tell WebpackDevServer to use the same "root" path
+      // as we specified in the config. In development, we always serve from /.
+      publicPath: "/",
+      watch: {
+        ignored: ignoredFiles(paths.appSrc),
+      },
     },
     // Enable HTTPS if the HTTPS environment variable is set to 'true'
-    https: protocol === 'https',
+    server: {
+      type: protocol,
+    },
     host,
-    overlay: false,
+    port,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
     },
-    public: allowedHost,
+    client: {
+      // Silence WebpackDevServer's own logs since they're generally not useful.
+      // It will still show compile warnings and errors with this setting.
+      logging: "none",
+      webSocketURL: allowedHost,
+      overlay: false,
+    },
     proxy,
-    before(app, server) {
+    setupMiddlewares: (middlewares, server) => {
       if (fs.existsSync(paths.proxySetup)) {
         // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(app);
+        require(paths.proxySetup)(server.app);
       }
 
-      // This lets us fetch source contents from webpack for the error overlay
-      app.use(evalSourceMapMiddleware(server));
-      // This lets us open files from the runtime error overlay.
-      app.use(errorOverlayMiddleware());
-
-      // 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
-      app.use(noopServiceWorkerMiddleware());
+      middlewares.unshift(
+        // This lets us fetch source contents from webpack for the error overlay.
+        evalSourceMapMiddleware(server),
+        // This lets us open files from the runtime error overlay.
+        errorOverlayMiddleware()
+      );
+      return middlewares;
     },
   };
 };

package.json

@@ -3,8 +3,10 @@
   "version": "1.6.0",
   "private": true,
   "dependencies": {
-    "@babel/core": "7.6.0",
+    "@babel/core": "^7.21.4",
     "@babel/helper-validator-option": "^7.21.0",
+    "@babel/plugin-syntax-flow": "^7.21.4",
+    "@babel/plugin-transform-react-jsx": "^7.21.0",
     "@reduxjs/toolkit": "^1.0.4",
     "@sentry/react": "^6.3.1",
     "@sentry/tracing": "^6.3.1",
@@ -27,33 +29,34 @@
     "@types/sdp-transform": "^2.4.3",
     "@types/wavesurfer.js": "^3.3.1",
     "@types/webpack-env": "^1.14.1",
-    "@typescript-eslint/eslint-plugin": "^2.2.0",
-    "@typescript-eslint/parser": "^2.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
     "babel-eslint": "10.0.3",
     "babel-jest": "^24.9.0",
     "babel-loader": "8.0.6",
     "babel-plugin-named-asset-import": "^0.3.4",
     "babel-preset-react-app": "^9.0.2",
     "between.js": "^0.1.2-fix.2",
     "camelcase": "^5.2.0",
-    "case-sensitive-paths-webpack-plugin": "2.2.0",
-    "css-loader": "2.1.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "css-loader": "6.7.3",
     "date-fns": "^2.12.0",
     "dotenv": "6.2.0",
     "dotenv-expand": "5.1.0",
-    "eslint": "^6.1.0",
-    "eslint-config-react-app": "^5.0.2",
-    "eslint-loader": "3.0.2",
-    "eslint-plugin-flowtype": "3.13.0",
-    "eslint-plugin-import": "2.18.2",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.14.3",
-    "eslint-plugin-react-hooks": "^1.6.1",
+    "eslint": "^8.38.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-webpack-plugin": "^4.0.1",
     "eventemitter3": "^4.0.0",
+    "express": "^4.18.2",
     "fetch-progress": "github:UniversityRadioYork/fetch-progress",
-    "file-loader": "3.0.1",
+    "file-loader": "^6.2.0",
     "fs-extra": "7.0.1",
-    "html-webpack-plugin": "4.0.0-beta.5",
+    "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "3.0.0",
     "immer": "^9.0.6",
     "is-wsl": "^1.1.0",
@@ -64,32 +67,31 @@
     "keymaster": "^1.6.2",
     "later": "^1.2.0",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "0.8.0",
-    "optimize-css-assets-webpack-plugin": "5.0.3",
+    "mini-css-extract-plugin": "^2.7.5",
+    "minimist": "1.2.8",
     "pnp-webpack-plugin": "1.5.0",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",
     "postcss-normalize": "7.0.1",
     "postcss-preset-env": "6.7.0",
-    "postcss-safe-parser": "4.0.1",
     "prop-types": "^15.0.0",
     "qs": "^6.9.1",
-    "react": "^16.13.1",
-    "react-app-polyfill": "^1.0.4",
-    "react-beautiful-dnd": "^12.1.1",
+    "react": "^16.9.11",
+    "react-app-polyfill": "^3.0.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-beforeunload": "^2.1.0",
     "react-contexify": "^4.1.1",
-    "react-dev-utils": "^9.1.0",
+    "react-dev-utils": "^12.0.1",
     "react-dnd": "^9.4.0",
     "react-dnd-html5-backend": "^9.4.0",
     "react-dom": "^16.13.1",
     "react-icons": "^3.9.0",
     "react-live-clock": "^4.0.5",
     "react-modal": "^3.11.2",
     "react-redux": "^7.1.3",
-    "react-scripts": "3.4.1",
+    "react-scripts": "^5.0.1",
     "react-tooltip": "^4.2.13",
-    "reactstrap": "^8.4.1",
+    "reactstrap": "^9.1.9",
     "redux": "^4.0.4",
     "redux-persist": "^6.0.0",
     "resolve": "1.12.0",
@@ -101,21 +103,21 @@
     "serialize-javascript": "^5.0.1",
     "stereo-analyser-node": "^1.0.0",
     "strict-event-emitter-types": "^2.0.0",
-    "style-loader": "1.0.0",
-    "terser-webpack-plugin": "1.4.1",
+    "style-loader": "^3.3.2",
+    "terser-webpack-plugin": "^5.3.7",
     "ts-pnp": "1.1.4",
-    "typescript": "3.7.2",
-    "url-loader": "2.1.0",
+    "typescript": "^4.0.0",
+    "url": "^0.11.0",
+    "url-loader": "^4.1.1",
     "wavesurfer.js": "4.1.1",
-    "webpack": "4.41.0",
-    "webpack-dev-server": "3.2.1",
-    "webpack-manifest-plugin": "2.1.1",
-    "workbox-webpack-plugin": "^5.1.2",
-    "worklet-loader": "^1.0.0"
+    "webpack": "5.79.0",
+    "webpack-dev-server": "^4.13.2",
+    "webpack-manifest-plugin": "^5.0.0",
+    "workbox-webpack-plugin": "^6.5.4"
   },
   "homepage": "./",
   "scripts": {
-    "start": "node scripts/start.js",
+    "start": "node --trace-deprecation scripts/start.js",
     "start-baps": "node scripts/start.js baps",
     "build": "node scripts/build.js",
     "build-baps": "node scripts/build.js baps",
@@ -126,22 +128,28 @@
   },
   "browserslist": {
     "production": [
-      ">0.2%",
+      ">0.3%",
+      "not ie 11",
       "not dead",
       "not op_mini all"
     ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
-      "last 1 safari version"
+      "last 1 safari version",
+      ">0.3%",
+      "not ie 11",
+      "not dead",
+      "not op_mini all"
     ]
   },
   "devDependencies": {
     "@types/puppeteer": "^3.0.0",
     "@ury1350/prettier-config": "^1.0.0",
+    "css-minimizer-webpack-plugin": "^5.0.0",
     "husky": "^4.3.0",
     "lint-staged": ">=10",
-    "prettier": "^1.19.1"
+    "prettier": "^2.8.7"
   },
   "jest": {
     "roots": [

scripts/start.js

@@ -26,7 +26,6 @@ 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,
@@ -111,18 +110,12 @@ checkBrowsers(paths.appPath, isInteractive)
     // Serve webpack assets generated by the compiler over a web server.
     const serverConfig = createDevServerConfig(
       proxyConfig,
-      urls.lanUrlForConfig
+      urls.localUrlForBrowser,
+      port
     );
-    const devServer = new WebpackDevServer(compiler, serverConfig);
+    const devServer = new WebpackDevServer(serverConfig, compiler);
     // Launch WebpackDevServer.
-    devServer.listen(port, HOST, (err) => {
-      if (err) {
-        return console.log(err);
-      }
-      if (isInteractive) {
-        clearConsole();
-      }
-
+    devServer.startCallback(() => {
       // We used to support resolving modules according to `NODE_PATH`.
       // This now has been deprecated in favor of jsconfig/tsconfig.json
       // This lets you use absolute paths in imports inside large monorepos:

src/broadcast/recording_streamer.ts

@@ -27,7 +27,7 @@ export class RecordingStreamer extends Streamer {
       a.click();
     };
     this.recorder.onerror = (e) => {
-      console.error(e.error);
+      console.error(e);
       this.onStateChange("CONNECTION_LOST");
     };
   }

src/broadcast/rtc_streamer.ts

@@ -168,7 +168,7 @@ export class WebRTCStreamer extends Streamer {
 
   // TODO: supporting trickle ICE would be nICE
   waitForIceCandidates() {
-    return new Promise((resolve) => {
+    return new Promise<void>((resolve) => {
       if (!this.pc) {
         throw new Error(
           "Tried to gather ICE Candidates with a null PeerConnection!"

src/broadcast/streamer.ts

@@ -10,8 +10,8 @@ export type ConnectionStateListener = (val: ConnectionStateEnum) => any;
 export abstract class Streamer {
   private csListeners: ConnectionStateListener[] = [];
 
-  public abstract async start(): Promise<void>;
-  public abstract async stop(): Promise<void>;
+  public abstract start(): Promise<void>;
+  public abstract stop(): Promise<void>;
   public addConnectionStateListener(listener: ConnectionStateListener) {
     this.csListeners.push(listener);
     return () => {