fix(ui): restore webpack 5 production build and dependency resolution

- replace webpack 4-only production plugins with webpack 5 equivalents
- restore extracted CSS, asset-manifest generation, and service-worker output
- remove the legacy peer dependency install workaround from the UI build script
- align ui package dependencies and regenerate the lockfile to install cleanly
- replace the outdated ts-jest preprocessor shim with a local TypeScript Jest transform
- revert dist/npm inquirer and find-process to CommonJS-safe versions
- tighten configToYAML typing and align CustomNavLink active state with NavLink semantics
- fix TerminalCache typing so the UI build passes lint and type checks

Author: zerbitx

assets/assets.go

@@ -19,9 +19,9 @@
     },
     "dependencies": {
         "cli-spinner": "^0.2.10",
-        "find-process": "^2.1.1",
-        "inquirer": "^13.3.2",
+        "find-process": "^1.4.7",
+        "inquirer": "^7.0.5",
         "node-fetch": "^2.6.7"
     },
     "license": "Apache-2.0"
-}
+}

dist/npm/package.json

@@ -5,7 +5,7 @@ set -e
 DEVSPACE_ROOT=$(git rev-parse --show-toplevel)
 
 # Install dependencies
-cd ui && npm install --legacy-peer-deps && npm run build
+cd ui && npm install && npm run build
 
 # Pack ui
 echo "Packing ui"

hack/build-ui.bash

@@ -2,6 +2,25 @@
 
 'use strict';
 
-const tsJestPreprocessor = require('ts-jest/preprocessor');
+const path = require('path');
+const typescript = require('typescript');
 
-module.exports = tsJestPreprocessor;
+const configPath = path.resolve(__dirname, '../../tsconfig.test.json');
+const { config } = typescript.readConfigFile(configPath, typescript.sys.readFile);
+const parsedConfig = typescript.parseJsonConfigFileContent(config, typescript.sys, path.dirname(configPath));
+
+module.exports = {
+  process(src, filename) {
+    const result = typescript.transpileModule(src, {
+      compilerOptions: {
+        ...parsedConfig.options,
+        sourceMap: false,
+      },
+      fileName: filename,
+    });
+
+    return {
+      code: result.outputText,
+    };
+  },
+};

ui/config/jest/typescriptTransform.js

@@ -233,20 +233,18 @@ module.exports = {
               },
             ],
           },
-          // "file" loader makes sure those assets get served by WebpackDevServer.
+          // Webpack 5 asset modules emit files directly without file-loader.
           // When you `import` an asset, you get its (virtual) filename.
           // In production, they would get copied to the `build` folder.
-          // This loader doesn't use a "test" so it will catch all modules
-          // that fall through the other loaders.
           {
             // Exclude `js` files to keep "css" loader working as it injects
-            // its runtime that would otherwise processed through "file" loader.
+            // its runtime that would otherwise be processed through the asset rule.
             // Also exclude `html` and `json` extensions so they get processed
-            // by webpacks internal loaders.
+            // by webpack's internal loaders.
             exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
-            loader: require.resolve('file-loader'),
-            options: {
-              name: 'static/media/[name].[hash:8].[ext]',
+            type: 'asset/resource',
+            generator: {
+              filename: 'static/media/[name].[hash:8][ext]',
             },
           },
         ],

ui/config/webpack.config.dev.js

@@ -4,6 +4,9 @@ const autoprefixer = require('autoprefixer');
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
@@ -43,6 +46,13 @@ if (env.stringified['process.env'].NODE_ENV !== '"production"') {
   throw new Error('Production builds must have NODE_ENV=production.');
 }
 
+const cssFilename = 'static/css/[name].[contenthash:8].css';
+const cssPublicPath = shouldUseRelativeAssetPaths ? Array(cssFilename.split('/').length).join('../') : undefined;
+const getExtractLoader = () => ({
+  loader: MiniCssExtractPlugin.loader,
+  options: cssPublicPath ? { publicPath: cssPublicPath } : {},
+});
+
 // This is the production configuration.
 // It compiles slowly and is focused on producing a fast and minimal bundle.
 // The development configuration is different and lives in a separate file.
@@ -159,43 +169,47 @@ module.exports = {
           {
             test: /\.module\.s(a|c)ss$/,
             use: [
-              require.resolve('style-loader'),
-              // isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
+              getExtractLoader(),
               {
                 loader: require.resolve('css-loader'),
                 options: {
                   importLoaders: 1,
                   modules: {
                     localIdentName: '[hash:base64]',
                   },
+                  sourceMap: shouldUseSourceMap,
                 },
               },
               {
-                ...getSassLoader(),
+                ...getSassLoader({
+                  sourceMap: shouldUseSourceMap,
+                }),
               },
             ],
           },
           // SCSS: https://github.com/webpack-contrib/sass-loader
           {
             test: /\.scss$/,
             use: [
-              'style-loader', // creates style nodes from JS strings
-              'css-loader', // translates CSS into CommonJS
-              getSassLoader(), // compiles Sass to CSS
+              getExtractLoader(),
+              {
+                loader: require.resolve('css-loader'),
+                options: {
+                  sourceMap: shouldUseSourceMap,
+                },
+              },
+              getSassLoader({
+                sourceMap: shouldUseSourceMap,
+              }),
             ],
           },
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.
-          // "style" loader turns CSS into JS modules that inject <style> tags.
+          // "mini-css-extract-plugin" extracts the final CSS into a production asset.
           {
             test: /\.css$/,
             use: [
-              {
-                loader: require.resolve('style-loader'),
-                options: {
-                  hmr: false,
-                },
-              },
+              getExtractLoader(),
               {
                 loader: require.resolve('css-loader'),
                 options: {
@@ -226,19 +240,17 @@ module.exports = {
             ],
           },
 
-          // "file" loader makes sure assets end up in the `build` folder.
+          // Webpack 5 asset modules emit files directly without file-loader.
           // When you `import` an asset, you get its filename.
-          // This loader doesn't use a "test" so it will catch all modules
-          // that fall through the other loaders.
           {
-            loader: require.resolve('file-loader'),
             // Exclude `js` files to keep "css" loader working as it injects
-            // it's runtime that would otherwise processed through "file" loader.
+            // its runtime that would otherwise be processed through the asset rule.
             // Also exclude `html` and `json` extensions so they get processed
-            // by webpacks internal loaders.
+            // by webpack's internal loaders.
             exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
-            options: {
-              name: 'static/media/[name].[hash:8].[ext]',
+            type: 'asset/resource',
+            generator: {
+              filename: 'static/media/[name].[hash:8][ext]',
             },
           },
           // ** STOP ** Are you adding a new loader?
@@ -313,6 +325,20 @@ module.exports = {
       // Default number of concurrent runs: os.cpus().length - 1
       parallel: true,
     }),
+    new MiniCssExtractPlugin({
+      filename: cssFilename,
+      chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+    }),
+    new WebpackManifestPlugin({
+      fileName: 'asset-manifest.json',
+    }),
+    new WorkboxWebpackPlugin.GenerateSW({
+      dontCacheBustURLsMatching: /\.\w{8}\./,
+      swDest: 'service-worker.js',
+      navigateFallback: publicUrl + '/index.html',
+      navigateFallbackDenylist: [/^\/__/],
+      exclude: [/\.map$/, /asset-manifest\.json$/],
+    }),
     // Moment.js is an extremely popular library that bundles large locale files
     // by default due to how Webpack interprets its code. This is a practical
     // solution that requires the user to opt into importing specific locales.