UI dep updates and migrations

[zerbitx]

What issue type does this pull request address? (keep at least one, remove the others)
/kind enhancement

What does this pull request do? Which issues does it resolve? (use resolves #<issue_number> if possible)
resolves #

Please provide a short message that should be published in the DevSpace release notes
Fixed an issue where DevSpace ...

What else do we need to know?

[netlify]

✅ Deploy Preview for devspace-docs canceled.

Name	Link
🔨 Latest commit	b9fdade
🔍 Latest deploy log	https://app.netlify.com/projects/devspace-docs/deploys/69eab3d8c0cca60008d55aa8

[zerbitx]

Adversarial (claude) Review — PR #3230 "UI dep updates and migrations"

Overview

Three concurrent migrations in one PR: React Router v5→v6, Sass @import→@use, and Webpack 4→5 cleanup. The SCSS and router-hook migrations are mechanically correct. The webpack changes contain a meaningful production regression that needs fixing before merge.

---

HIGH — Production CSS extraction is broken

File: ui/config/webpack.config.prod.js

ExtractTextPlugin was removed (it doesn't work with webpack 5 — correct), but nothing replaced it. The prod config now uses style-loader for CSS, same as dev. This means:

1. All styles are injected at runtime via JS <style> tags — no separate .css file in the production bundle.
2. Flash of unstyled content (FOUC) until JS parses and executes.
3. Style assets can't be cached independently from JS.
4. Larger JS bundle.

The comment in the code literally documents the intent:

// isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,

...but MiniCssExtractPlugin was never wired up. mini-css-extract-plugin is the webpack 5 replacement for ExtractTextPlugin and ships with webpack 5 installations. The prod config should use it.

---

HIGH — --legacy-peer-deps without documented root cause

File: hack/build-ui.bash

npm install --legacy-peer-deps && npm run build

The commit message says "npm install with legacy deps for now" — the "for now" is load-bearing. --legacy-peer-deps silences peer dependency conflicts rather than resolving them. If two packages have genuinely incompatible requirements, they may both be installed, with unpredictable runtime behavior. The actual conflicting pairs should be identified and resolved (or explicitly pinned with a justification). As shipped, this is an untimed deferral.

---

HIGH — inquirer v7→v13 in dist/npm/package.json may break the npm package

File: dist/npm/package.json

- "inquirer": "^7.0.5",
+ "inquirer": "^13.3.2",

Inquirer became ESM-only starting at v9. If the DevSpace CLI npm package is distributed as CommonJS (which is typical for a CLI), require('inquirer') will throw an ERR_REQUIRE_ESM error at runtime in Node.js ≤ 21 without --experimental-require-module. This is a silent breaking change for users installing the npm package. Either stay on v8 (last CJS-compatible) or verify the package's module format and Node.js version requirements.

---

MEDIUM — Service worker silently removed from production build

File: ui/config/webpack.config.prod.js

SWPrecacheWebpackPlugin and the service-worker.js generation are gone with no mention in the PR description. If the app was using this for offline capability or precaching (common for SPAs embedded in a CLI tool), this is a regression. Even if the service worker wasn't actively used, removing it without calling it out risks surprising consumers of the embedded UI.

---

MEDIUM — configToYAML type regression

File: ui/src/lib/utils.tsx

// Old
export const configToYAML = (config: Config, reverse?: boolean) => {
// New
export const configToYAML = (config: object, reverse?: boolean) => {

object accepts anything including functions and class instances, which js-yaml would serialize incorrectly. At minimum use Record<string, unknown>. If the callers always pass a plain Config-shaped object, keep the import or define a local structural type. Dropping to object loses all the benefit of TypeScript here.

---

LOW — CustomNavLink active state can diverge from NavLink's aria-current

File: ui/src/components/basic/CustomNavLink/CustomNavLink.tsx

const isActive = targetPath ? currentPath.startsWith(targetPath) : currentPath === targetPath;
const classNames = [className, isActive ? activeClassName : undefined].filter(Boolean).join(' ');
return <NavLink {...props} className={classNames} to={to} />;

NavLink in v6 adds aria-current="page" based on its own internal path matching (exact match by default, or controlled by the end prop). Our isActive uses startsWith. These two checks can diverge:

• currentPath = /logs/containers, targetPath = /logs → our code: active (starts with); NavLink internal: inactive (no exact match, no end=false).

In practice, the current app's nav links go to full paths like /logs/containers, not parent segments like /logs, so this shouldn't fire. But the mismatch between visual active state (our CSS) and semantic active state (aria-current) is fragile as routes are added.

---

LOW — CustomNavLink dead fallback branch

File: ui/src/components/basic/CustomNavLink/CustomNavLink.tsx

const isActive = targetPath ? currentPath.startsWith(targetPath) : currentPath === targetPath;

When targetPath is empty string (falsy), the fallback is currentPath === targetPath, i.e. currentPath === "". currentPath is the result of formatURL(location.pathname), which on any real page won't be empty, so this branch is dead. The correct fallback for an empty to would arguably be false. Minor, but the logic is surprising.

---

CORRECT — these changes look good

• SCSS @import → @use: The sass-migrator output is correct. Namespace-qualified variable references (constants.$blue-dark etc.) are the right pattern. @include meta.load-css(...) for side-effect-only files is correct.
• React Router v5 → v6 migration: Switch→Routes, component=→element=, withRouter→hooks, ConditionalRoute→<Navigate> are all textbook correct migrations. The breadcrumb refactor from class+withRouter to function+useLocation is clean.
• Webpack IgnorePlugin API update: new webpack.IgnorePlugin({ resourceRegExp, contextRegExp }) is the webpack 5 API. Correct.
• resolve.fallback replacing node:: The webpack 5 way to provide node polyfill stubs. Correct.
• @types/react-router and @types/react-router-dom removed: react-router v6 ships its own types. The v5 type packages would conflict. Correct removal.

---

Summary

Severity	Count
High	3
Medium	2
Low	2
Correct	5

The blockers before merge: the production CSS extraction gap (no MiniCssExtractPlugin), the unresolved peer dep conflict hidden behind --legacy-peer-deps, and the inquirer ESM compatibility risk in the npm package. The rest can be addressed as follow-ups.

[zerbitx]

Claude's follow up review

Here's the round 2 verdict:

All three previous HIGH blockers are resolved. The latest commit (b9fdade) correctly addresses every
finding from the first review:

• MiniCssExtractPlugin is properly wired up in all CSS/SCSS rules — production CSS will be extracted to a
  separate file
• --legacy-peer-deps is gone from the build script; the lockfile was regenerated clean
• inquirer and find-process in dist/npm/package.json are reverted to CJS-safe versions
• WorkboxWebpackPlugin.GenerateSW and WebpackManifestPlugin restore the service worker and asset manifest
• configToYAML now uses a tight union type that covers both real call sites
• CustomNavLink delegates isActive entirely to NavLink, eliminating the CSS/aria-current divergence

One new LOW finding: ui/config/jest/typescriptTransform.js explicitly sets sourceMap: false and returns no
map field, so Jest test failures will show transpiled JS line numbers instead of original TypeScript
lines. There are currently zero test files in ui/src, so the immediate impact is zero — but the fix is a
one-liner (replace sourceMap: false with inlineSourceMap: true, inlineSources: true).

Two carry-forward pre-existing issues (not from this PR): postcss-loader v4 with v3 API, and url-loader's
build/ prefix path for large images.

Overall: ready to merge.