From a26b8e5110d5279f315199fd9f17815444fc0ba1 Mon Sep 17 00:00:00 2001 From: Ryan Swanson Date: Thu, 23 Apr 2026 14:21:38 -0600 Subject: [PATCH 1/7] npm install with legacy deps for now update webpack configs --- hack/build-ui.bash | 2 +- ui/config/webpack.config.dev.js | 23 +++-- ui/config/webpack.config.prod.js | 166 +++++++++---------------------- 3 files changed, 59 insertions(+), 132 deletions(-) diff --git a/hack/build-ui.bash b/hack/build-ui.bash index b833c204cf..e0cc5f26b1 100755 --- a/hack/build-ui.bash +++ b/hack/build-ui.bash @@ -5,7 +5,7 @@ set -e DEVSPACE_ROOT=$(git rev-parse --show-toplevel) # Install dependencies -cd ui && npm install && npm run build +cd ui && npm install --legacy-peer-deps && npm run build # Pack ui echo "Packing ui" diff --git a/ui/config/webpack.config.dev.js b/ui/config/webpack.config.dev.js index 59e556c1a7..ce5c39ffb0 100644 --- a/ui/config/webpack.config.dev.js +++ b/ui/config/webpack.config.dev.js @@ -88,6 +88,13 @@ module.exports = { // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'react-native-web', }, + fallback: { + dgram: false, + fs: false, + net: false, + tls: false, + child_process: false, + }, plugins: [ // Prevents users from importing files from outside of src/ (or node_modules/). // This often causes confusion because we only process files within src/ with babel. @@ -150,7 +157,7 @@ module.exports = { }, { test: /\.module\.s(a|c)ss$/, - loader: [ + use: [ require.resolve('style-loader'), // isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader, { @@ -266,7 +273,10 @@ module.exports = { // solution that requires the user to opt into importing specific locales. // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack // You can remove this if you don't use Moment.js: - new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), + new webpack.IgnorePlugin({ + resourceRegExp: /^\.\/locale$/, + contextRegExp: /moment$/, + }), // Perform type checking and linting in a separate process to speed up compilation new ForkTsCheckerWebpackPlugin({ async: false, @@ -275,15 +285,6 @@ module.exports = { tslint: paths.appTsLint, }), ], - // Some libraries import Node modules but don't use them in the browser. - // Tell Webpack to provide empty mocks for them so importing them works. - node: { - dgram: 'empty', - fs: 'empty', - net: 'empty', - tls: 'empty', - child_process: 'empty', - }, // Turn off performance hints during development because we don't do any // splitting or minification in interest of speed. These warnings become // cumbersome. diff --git a/ui/config/webpack.config.prod.js b/ui/config/webpack.config.prod.js index 51461e0869..a9011dbb16 100644 --- a/ui/config/webpack.config.prod.js +++ b/ui/config/webpack.config.prod.js @@ -4,10 +4,7 @@ const autoprefixer = require('autoprefixer'); const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); -const ExtractTextPlugin = require('extract-text-webpack-plugin'); -const ManifestPlugin = require('webpack-manifest-plugin'); const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); -const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'); const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); const paths = require('./paths'); @@ -36,18 +33,6 @@ if (env.stringified['process.env'].NODE_ENV !== '"production"') { throw new Error('Production builds must have NODE_ENV=production.'); } -// Note: defined here because it will be used more than once. -const cssFilename = 'static/css/[name].[contenthash:8].css'; - -// ExtractTextPlugin expects the build output to be flat. -// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27) -// However, our output is structured with css, js and media folders. -// To have this structure working with relative paths, we have to use custom options. -const extractTextPluginOptions = shouldUseRelativeAssetPaths - ? // Making sure that the publicPath goes back to to build folder. - { publicPath: Array(cssFilename.split('/').length).join('../') } - : {}; - // 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. @@ -94,6 +79,13 @@ module.exports = { // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'react-native-web', }, + fallback: { + dgram: false, + fs: false, + net: false, + tls: false, + child_process: false, + }, plugins: [ // Prevents users from importing files from outside of src/ (or node_modules/). // This often causes confusion because we only process files within src/ with babel. @@ -156,7 +148,7 @@ module.exports = { }, { test: /\.module\.s(a|c)ss$/, - loader: [ + use: [ require.resolve('style-loader'), // isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader, { @@ -182,64 +174,46 @@ module.exports = { 'sass-loader', // compiles Sass to CSS, using Node Sass by default ], }, - // The notation here is somewhat confusing. // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. - // "style" loader normally turns CSS into JS modules injecting