Upgrade dependencies to work with Node v22+

config/webpack.config.js

@@ -13,7 +13,6 @@ const safePostCssParser = require('postcss-safe-parser');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const ESLintPlugin = require('eslint-webpack-plugin');
@@ -22,7 +21,6 @@ const modules = require('./modules');
 const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
-const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
@@ -676,12 +674,6 @@ module.exports = function (webpackEnv) {
       // a plugin that prints an error when you attempt to do this.
       // See https://github.com/facebook/create-react-app/issues/240
       isEnvDevelopment && new CaseSensitivePathsPlugin(),
-      // If you require a missing module and then `npm install` it, you still have
-      // to restart the development server for webpack to discover it. This plugin
-      // makes the discovery automatic so you don't have to restart.
-      // See https://github.com/facebook/create-react-app/issues/186
-      isEnvDevelopment &&
-      new WatchMissingNodeModulesPlugin(paths.appNodeModules),
       isEnvProduction &&
       new MiniCssExtractPlugin({
         // Options similar to the same options in webpackOptions.output
@@ -731,33 +723,32 @@ module.exports = function (webpackEnv) {
       // TypeScript type checking
       useTypeScript &&
       new ForkTsCheckerWebpackPlugin({
-        typescript: resolve.sync('typescript', {
-          basedir: paths.appNodeModules,
-        }),
         async: isEnvDevelopment,
-        checkSyntacticErrors: true,
-        resolveModuleNameModule: process.versions.pnp
-          ? `${__dirname}/pnpTs.js`
-          : undefined,
-        resolveTypeReferenceDirectiveModule: process.versions.pnp
-          ? `${__dirname}/pnpTs.js`
-          : undefined,
-        tsconfig: paths.appTsConfig,
-        reportFiles: [
-          // This one is specifically to match during CI tests,
-          // as micromatch doesn't match
-          // '../cra-template-typescript/template/src/App.tsx'
-          // otherwise.
-          '../**/src/**/*.{ts,tsx}',
-          '**/src/**/*.{ts,tsx}',
-          '!**/src/**/__tests__/**',
-          '!**/src/**/?(*.)(spec|test).*',
-          '!**/src/setupProxy.*',
-          '!**/src/setupTests.*',
-        ],
-        silent: true,
-        // The formatter is invoked directly in WebpackDevServerUtils during development
-        formatter: isEnvProduction ? typescriptFormatter : undefined,
+        typescript: {
+          typescriptPath: resolve.sync('typescript', {
+            basedir: paths.appNodeModules,
+          }),
+          configFile: paths.appTsConfig,
+          context: paths.appPath,
+          diagnosticOptions: {
+            syntactic: true,
+          },
+        },
+        issue: {
+          include: [
+            { file: '../**/src/**/*.{ts,tsx}' },
+            { file: '**/src/**/*.{ts,tsx}' },
+          ],
+          exclude: [
+            { file: '**/src/**/__tests__/**' },
+            { file: '**/src/**/?(*.)(spec|test).*' },
+            { file: '**/src/setupProxy.*' },
+            { file: '**/src/setupTests.*' },
+          ],
+        },
+        logger: {
+          infrastructure: 'silent',
+        },
       }),
       new ESLintPlugin({
         // Plugin options

config/webpackDevServer.config.js

@@ -9,120 +9,113 @@ const getHttpsConfig = require('./getHttpsConfig');
 
 const host = process.env.HOST || '0.0.0.0';
 const sockHost = process.env.WDS_SOCKET_HOST;
-const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
+const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
 const sockPort = process.env.WDS_SOCKET_PORT;
 
 module.exports = function (proxy, allowedHost) {
+  // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
+  // websites from potentially accessing local content through DNS rebinding:
+  // https://github.com/webpack/webpack-dev-server/issues/887
+  // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
+  // However, it made several existing use cases such as development in cloud
+  // environment or subdomains in development significantly more complicated:
+  // https://github.com/facebook/create-react-app/issues/2271
+  // https://github.com/facebook/create-react-app/issues/2233
+  // While we're investigating better solutions, for now we will take a
+  // compromise. Since our WDS configuration only serves files in the `public`
+  // folder we won't consider accessing them a vulnerability. However, if you
+  // use the `proxy` feature, it gets more dangerous because it can expose
+  // remote code execution vulnerabilities in backends like Django and Rails.
+  // 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.
+  const disableFirewall =
+    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
+
   return {
-    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
-    // websites from potentially accessing local content through DNS rebinding:
-    // https://github.com/webpack/webpack-dev-server/issues/887
-    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
-    // However, it made several existing use cases such as development in cloud
-    // environment or subdomains in development significantly more complicated:
-    // https://github.com/facebook/create-react-app/issues/2271
-    // https://github.com/facebook/create-react-app/issues/2233
-    // While we're investigating better solutions, for now we will take a
-    // compromise. Since our WDS configuration only serves files in the `public`
-    // folder we won't consider accessing them a vulnerability. However, if you
-    // use the `proxy` feature, it gets more dangerous because it can expose
-    // remote code execution vulnerabilities in backends like Django and Rails.
-    // 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: disableFirewall ? 'all' : [allowedHost],
     // 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,
-    contentBasePublicPath: paths.publicUrlOrPath,
-    // By default files from `contentBase` will not trigger a page reload.
-    watchContentBase: true,
-    // Enable hot reloading server. It will provide WDS_SOCKET_PATH 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,
-    // Use 'ws' instead of 'sockjs-node' on server since we're using native
-    // websockets in `webpackHotDevClient`.
-    transportMode: 'ws',
-    // Prevent a WS client from getting injected as we're already including
-    // `webpackHotDevClient`.
-    injectClient: false,
-    // Enable custom sockjs pathname for websocket connection to hot reloading server.
-    // Enable custom sockjs hostname, pathname and port for websocket connection
-    // to hot reloading server.
-    sockHost,
-    sockPath,
-    sockPort,
-    // It is important to tell WebpackDevServer to use the same "publicPath" path as
-    // we specified in the webpack config. When homepage is '.', default to serving
-    // from the root.
-    // remove last slash so user can land on `/test` instead of `/test/`
-    publicPath: paths.publicUrlOrPath.slice(0, -1),
-    // 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),
+    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',
+      overlay: false,
+      webSocketURL: {
+        // Enable custom sockjs pathname for websocket connection to hot reloading server.
+        // Enable custom sockjs hostname, pathname and port for websocket connection
+        // to hot reloading server.
+        hostname: sockHost,
+        pathname: sockPath,
+        port: sockPort,
+      },
+    },
+    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 "publicPath" path as
+      // we specified in the webpack config. When homepage is '.', default to serving
+      // from the root.
+      publicPath: [paths.publicUrlOrPath],
+      watch: {
+        ignored: ignoredFiles(paths.appSrc),
+      },
+    },
+    devMiddleware: {
+      // remove last slash so user can land on `/test` instead of `/test/`
+      publicPath: paths.publicUrlOrPath.slice(0, -1),
     },
     https: getHttpsConfig(),
     host,
-    overlay: false,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
       index: paths.publicUrlOrPath,
     },
-    public: allowedHost,
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
-    before(app, server) {
+    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);
+      }
+
       // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
       // middlewares before `redirectServedPath` otherwise will not have any effect
       // This lets us fetch source contents from webpack for the error overlay
-      app.use(evalSourceMapMiddleware(server));
+      middlewares.unshift(evalSourceMapMiddleware(devServer));
       // This lets us open files from the runtime error overlay.
-      app.use(errorOverlayMiddleware());
+      middlewares.unshift(errorOverlayMiddleware());
 
-      if (fs.existsSync(paths.proxySetup)) {
-        // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(app);
-      }
-    },
-    after(app) {
       // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
-      app.use(redirectServedPath(paths.publicUrlOrPath));
+      middlewares.push(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
-      app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+      middlewares.push(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+
+      return middlewares;
     },
   };
 };

package.json

@@ -11,14 +11,14 @@
     "express": "^4.17.1",
     "express-sslify": "^1.2.0",
     "helmet": "^4.1.1",
-    "http-proxy-middleware": "^1.0.6",
+    "http-proxy-middleware": "^2.0.7",
     "husky": "^5.0.8",
     "is-ci": "^2.0.0",
     "mustache": "^4.0.1"
   },
   "devDependencies": {
-    "@babel/core": "7.12.3",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
+    "@babel/core": "^7.24.7",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@reduxjs/toolkit": "^1.2.5",
     "@svgr/webpack": "5.4.0",
     "@testing-library/dom": "^7.26.3",
@@ -29,8 +29,8 @@
     "@types/lodash": "^4.14.165",
     "@types/moment-duration-format": "^2.2.2",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
+    "@types/react": "^17.0.74",
+    "@types/react-dom": "^17.0.25",
     "@types/react-i18next": "^8.1.0",
     "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "^5.1.6",
@@ -86,7 +86,6 @@
     "moment-timezone": "^0.5.31",
     "optimize-css-assets-webpack-plugin": "5.0.4",
     "pnp-webpack-plugin": "1.6.4",
-    "portable-fetch": "^3.0.0",
     "postcss-flexbugs-fixes": "4.2.1",
     "postcss-loader": "3.0.0",
     "postcss-normalize": "8.0.1",
@@ -95,15 +94,14 @@
     "querystring": "^0.2.0",
     "react": "^17.0.1",
     "react-app-polyfill": "^2.0.0",
-    "react-dev-utils": "^11.0.0",
+    "react-dev-utils": "^12.0.1",
     "react-dom": "^17.0.1",
     "react-i18next": "^11.8.5",
     "react-is": "^17.0.1",
     "react-moment": "^1.0.0",
     "react-redux": "^7.2.0",
-    "react-refresh": "^0.8.3",
+    "react-refresh": "^0.14.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.0",
     "react-use": "^15.3.4",
     "redux": "^4.0.5",
     "resolve": "1.18.1",
@@ -112,7 +110,7 @@
     "semantic-ui-calendar-react": "^0.15.3",
     "semantic-ui-less": "^2.4.1",
     "semantic-ui-react": "^2.0.1",
-    "semver": "7.3.2",
+    "semver": "^7.5.4",
     "style-loader": "1.3.0",
     "styled-components": "^5.2.0",
     "stylelint": "^13.9.0",
@@ -124,24 +122,30 @@
     "typescript": "~3.8.2",
     "url-loader": "4.1.1",
     "webpack": "4.44.2",
-    "webpack-dev-server": "3.11.0",
+    "webpack-dev-server": "^4.15.1",
     "webpack-manifest-plugin": "2.2.0",
-    "workbox-webpack-plugin": "5.1.4"
+    "workbox-webpack-plugin": "^6.6.0"
   },
   "engines": {
     "node": ">=12.13.0",
     "yarn": ">=1.22.1 <2.0.0"
   },
+  "resolutions": {
+    "@types/react": "^17.0.90",
+    "@types/react-dom": "^17.0.25",
+    "braces": "^3.0.3",
+    "nth-check": "^2.1.1"
+  },
   "scripts": {
     "docker": "yarn run docker:build && yarn run docker:run && yarn run docker:remove",
     "docker:build": "node scripts/docker.js",
     "docker:run": "dotenv -c development -- docker run -e REACT_APP_PRIMARY_COLOR -e REACT_APP_HOME_SERVER_URL -p 3000:80 --name fosdem-schedule-element-widget nordeck/fosdem-schedule-element-widget",
     "docker:stop": "docker stop fosdem-schedule-element-widget",
     "docker:remove": "yarn run docker:stop && docker rm -v fosdem-schedule-element-widget",
     "docker:inspect": "docker inspect nordeck/fosdem-schedule-element-widget",
-    "start": "cross-env HTTPS=true node scripts/start.js",
+    "start": "cross-env HTTPS=true NODE_OPTIONS=--openssl-legacy-provider node scripts/start.js",
     "start:production": "yarn run build && dotenv -c development -- node server.js",
-    "build": "cross-env GENERATE_SOURCEMAP=false node scripts/build.js",
+    "build": "cross-env GENERATE_SOURCEMAP=false NODE_OPTIONS=--openssl-legacy-provider node scripts/build.js",
     "test": "node scripts/test.js",
     "lint": "yarn run lint:css && yarn run lint:js",
     "lint:js": "eslint src/** --no-error-on-unmatched-pattern",