chore: Update front end to vite 8 and related upgrades#11766
Conversation
Dependency ReviewThe following issues were found:
OpenSSF ScorecardScorecard details
Scanned Files
|
de663db to
3f231ef
Compare
a9af0e5 to
5626f00
Compare
cypress-vite 1.8.0 hardcodes `output.manualChunks = false` in its UMD spec build config. Vite 8's Rolldown bundler rejects any `manualChunks` value when `codeSplitting: false` is implied (which it is for `lib`/`umd` builds), so Cypress fails to compile any spec under our Vite 8 upgrade. The patch deletes the hardcoded override, matching the fix proposed upstream in mammadataei/cypress-vite#137 (open since 2025-10-28, no maintainer response). See also mammadataei/cypress-vite#140 for the report of the same incompatibility. Drop this patch once cypress-vite ships a Rolldown-compatible release. Note for the pnpm migration: The patch file content is portable, but the wiring is yarn-specific. When the migration lands: 1. Copy `.yarn/patches/cypress-vite-npm-1.8.0-5384b5466c.patch` to `patches/cypress-vite@1.8.0.patch`. 2. Remove the `"cypress-vite": "patch:..."` resolution from `package.json`. 3. Add a `pnpm.patchedDependencies` block: "pnpm": { "patchedDependencies": { "cypress-vite@1.8.0": "patches/cypress-vite@1.8.0.patch" } } 4. Run `pnpm install` so pnpm hashes and applies the patch. pnpm 9+ applies patches natively; older versions need `patch-package` as a postinstall step.
e813bb7 to
23ddcad
Compare
Two unrelated bits of fallout from the upgrade caused `yarn ts:check`
to fail in CI:
1. Vitest 3 had been transitively pulling `@types/node` into the
ambient global scope, which `tsconfig.json`'s `types: ["cypress"]`
would otherwise have excluded. Vitest 4 stopped doing this, leaving
`process`, `global`, and `NodeJS.Timeout` undeclared in src and
test files alike. Add `"node"` to `compilerOptions.types` to opt
in explicitly.
2. The Vite 8 / vite-plugin-svgr 5 migration sweep changed
`import { ReactComponent as X } from 'foo.svg'` to
`import X from 'foo.svg?react'` across the codebase, but missed
three files. Convert them to match.
Runtime behaviour unchanged - both were checker-only issues.
| "cypress": "14.5.4", | ||
| "cypress-vite": "^1.4.0", | ||
| "cypress": "15.13.1", | ||
| "cypress-vite": "patch:cypress-vite@npm%3A1.8.0#~/.yarn/patches/cypress-vite-npm-1.8.0-5384b5466c.patch", |
There was a problem hiding this comment.
Cypress has an incompatibility with rolldown so we need this custom patch. It's a test library, so not too worried about it.
There was a problem hiding this comment.
Pull request overview
This PR upgrades the frontend build/test toolchain to Vite 8 (plus related ecosystem upgrades), updates Vite configuration accordingly, and migrates SVG imports to the newer SVGR usage pattern so the codebase continues to compile under the new tooling.
Changes:
- Upgrade Vite to v8 and update related tooling (Vitest v4, Cypress v15,
@vitejs/plugin-reactv6, vite-plugin-svgr v5) with corresponding lockfile updates. - Update
vite.config.mtsto accommodate Vite 8 behavior (built-in tsconfig paths resolution, MUI icons ESM redirect, dev-only Babel plugin usage for Emotion). - Migrate many SVG imports from
ReactComponentexports to?reactimports and update affected snapshots.
Reviewed changes
Copilot reviewed 67 out of 68 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/yarn.lock | Locks updated dependency graph for Vite 8 + related upgrades. |
| frontend/vite.config.mts | Updates Vite/Vitest config; adds MUI icons redirect plugin; switches tsconfig paths handling; configures Emotion Babel plugin via rolldown Babel plugin. |
| frontend/tsconfig.json | Adds node types alongside cypress. |
| frontend/package.json | Bumps Vite/Vitest/Cypress/SVGR/plugin-react versions and adds Babel/Emotion Babel deps. |
| frontend/.yarn/patches/cypress-vite-npm-1.8.0-5384b5466c.patch | Applies a patch to cypress-vite build config for compatibility. |
| frontend/src/utils/strategyNames.tsx | Migrates SVG import to ?react. |
| frontend/src/component/user/StandaloneBanner.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/user/DemoAuth/DemoAuth.tsx | Migrates SVG import to ?react. |
| frontend/src/component/user/common/AuthPageLayout.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/splash/SplashPageReleaseManagement.tsx | Migrates SVG import to ?react. |
| frontend/src/component/splash/SplashOverlay/ReleaseManagementSplash.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/signup/SignupDialog/SignupDialog.tsx | Migrates SVG import to ?react. |
| frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/TemplateFormDescription.tsx | Migrates SVG import to ?react. |
| frontend/src/component/releases/ReleaseManagement/ReleasePlanTemplateCard/ReleasePlanTemplateCard.tsx | Migrates SVG import to ?react. |
| frontend/src/component/releases/ReleaseManagement/EmptyTemplatesListMessage.tsx | Migrates SVG import to ?react. |
| frontend/src/component/project/ProjectList/ProjectCreationButton/ProjectCreationButton.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/project/ProjectCard/ProjectLastSeen/ProjectLastSeen.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx | Migrates SVG import to ?react. |
| frontend/src/component/project/Project/ProjectStatus/ProjectActivity.tsx | Adjusts react-activity-calendar import style for updated module exports. |
| frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestProcessHelp/ChangeRequestProcessHelp.tsx | Migrates SVG import to ?react. |
| frontend/src/component/project/Project/Project.tsx | Migrates SVG import to ?react. |
| frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/ImportButton/ImportButton.tsx | Migrates SVG import to ?react. |
| frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/personalDashboard/WelcomeDialog.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/personalDashboard/InfoSection.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashTooltip.tsx | Migrates SVG import to ?react. |
| frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/LegacyNewInUnleash.tsx | Migrates SVG import to ?react. |
| frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx | Migrates SVG imports to ?react and renames the “celebratory” logo identifiers. |
| frontend/src/component/layout/components/NewFeatureBadge/NewFeatureBadge.tsx | Migrates SVG import to ?react. |
| frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx | Migrates SVG import to ?react. |
| frontend/src/component/impact-metrics/ImpactMetricsEmptyState.tsx | Migrates SVG import to ?react. |
| frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx | Migrates SVG import to ?react. |
| frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsReleaseTemplates.tsx | Migrates SVG import to ?react. |
| frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/ToggleConstraintInverted.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/ToggleConstraintCaseSensitivity.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/environments/CreateEnvironmentButton/CreateEnvironmentButton.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/demo/DemoTopics/DemoTopics.tsx | Migrates SVG import to ?react. |
| frontend/src/component/demo/DemoNotice.tsx | Migrates SVG import to ?react. |
| frontend/src/component/common/Table/PaginationBar/PaginationBar.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/common/ProjectIcon/ProjectIcon.tsx | Migrates SVG import to ?react. |
| frontend/src/component/common/PrettifyLargeNumber/formatLargeNumber.ts | Updates millify import style to match updated module exports. |
| frontend/src/component/common/PremiumFeature/PremiumFeature.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/common/NotFound/NotFound.tsx | Migrates SVG import to ?react. |
| frontend/src/component/common/NoItems/NoItems.tsx | Migrates SVG import to ?react. |
| frontend/src/component/common/InstanceStatus/UpgradeTrialDialog.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/common/FormTemplate/FormTemplate.tsx | Migrates SVG import to ?react. |
| frontend/src/component/common/FeatureLifecycle/FeatureLifecycleStageIcon.tsx | Migrates lifecycle SVG imports to ?react. |
| frontend/src/component/common/EnterpriseBadge/EnterpriseBadge.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx | Migrates SVG import to ?react. |
| frontend/src/component/common/AvatarGroup/AvatarGroup.tsx | Updates millify import style to match updated module exports. |
| frontend/src/component/admin/users/LinkField/ConfirmUserEmail/ConfirmUserEmail.tsx | Migrates SVG import to ?react. |
| frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.tsx | Migrates SVG import to ?react. |
| frontend/src/component/admin/network/NetworkOverview/NetworkOverview.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/admin/enterprise-edge/EnterpriseEdgeInstances/EnterpriseEdgeInstances.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/admin/enterprise-edge/EnterpriseEdgeExplanation.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/admin/enterprise-edge/EnterpriseEdgeDismissibleAlert.tsx | Migrates SVG import to ?react. |
| frontend/src/component/admin/billing/TrialUpsell/TrialUpsell.tsx | Migrates SVG imports to ?react. |
| frontend/src/component/tags/TagTypeList/tests/snapshots/TagTypeList.test.tsx.snap | Updates snapshots due to className/output changes from dependency/tooling upgrades. |
| frontend/src/component/menu/Footer/ApiDetails/snapshots/ApiDetails.test.tsx.snap | Updates snapshots due to className/output changes from dependency/tooling upgrades. |
| frontend/src/component/menu/Footer/snapshots/Footer.test.tsx.snap | Updates snapshots due to className/output changes from dependency/tooling upgrades. |
| frontend/src/component/feedback/FeedbackCES/snapshots/FeedbackCESForm.test.tsx.snap | Updates snapshots due to className/output changes from dependency/tooling upgrades. |
| frontend/src/component/common/InstanceStatus/snapshots/InstanceStatusBar.test.tsx.snap | Updates snapshots due to className/output changes from dependency/tooling upgrades. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "use-query-params": "^2.2.1", | ||
| "vanilla-jsoneditor": "^3.11.0", | ||
| "vite": "5.4.21", | ||
| "vite": "^8.0.10", | ||
| "vite-plugin-env-compatible": "2.0.1", | ||
| "vite-plugin-svgr": "3.3.0", | ||
| "vite-tsconfig-paths": "4.3.2", | ||
| "vitest": "3.2.4", | ||
| "vite-plugin-svgr": "5.2.0", | ||
| "vitest": "4.1.2", |
| const StyledUnleashLogo = styled(UnleashLogo)({ width: '150px' }); | ||
|
|
||
| const StyledCelebatoryLogo = styled(CelebatoryUnleashLogo)({ width: '150px' }); | ||
| const StyledCelebatoryLogo = styled(CelebratoryUnleashLogo)({ width: '150px' }); | ||
|
|
gastonfournier
left a comment
There was a problem hiding this comment.
Looks good, I don't like the patch, but it's a small trade-off until the PR with the fix gets merged
This is an attempt to fix the Enterprise build issue due to to theme/app.css not being found. Claude suggests that it may be related to Vite 8's built-in `resolve.tsconfigPaths: true` not handling baseUrl-relative resolution reliably. I'm not positive that this will fix it, but it's a small change and it goes back to the way we did it before vite8, so it seems worth trying. It's hard to replicate locally, so this is probably the quickest way to validate it. For reference, the handling was updated in #11766. Running the front end with this plugin makes vite emit this: > The plugin "vite-tsconfig-paths" is detected. Vite now supports tsconfig paths resolution natively via the resolve.tsconfigPaths option. You can remove the plugin and set resolve.tsconfigPaths: true in your Vite config instead. However, there may still be some issues left to fix (e.g. vitejs/vite#21856 ; upstream PR to fix it oxc-project/oxc-resolver#1080) Claude's summary: Vite 8's built-in `resolve.tsconfigPaths: true` only handles `paths` mappings reliably; baseUrl-relative resolution is fragile in some environments (we hit it in enterprise's pnpm-driven prepack of OSS, where `themes/app.css` and similar bare imports failed to resolve). The pre-Vite-8 `vite-tsconfig-paths` plugin handled both. Re-add it with the same plugin position as before, and drop the built-in flag to avoid two resolvers disagreeing on edge cases. Drop the plugin again once the built-in handler matures.
(AI-generated summary; checked by @thomasheartman):
Brings the frontend onto the current Vite generation. The bulk of the diff is sweep-mechanical (svgr import format, snapshot prefix updates) but two upgrades introduced behaviour changes that needed code-level adjustments.
Headline upgrades
vite5 → 8 (Rolldown-based)vitest3 → 4@vitejs/plugin-react4 → 6vite-plugin-svgr3 → 5cypress14 → 15,cypress-vite→ 1.8.0 (patched, see below)@rolldown/plugin-babel,@emotion/babel-plugin,@babel/corevite-tsconfig-pathsin favour of Vite 8's built-inresolve.tsconfigPathsCode changes that were not just mechanical
@mui/icons-material5.x has noexportsfield and would otherwise return the rawmodule.exportsobject instead of the icon component. A smallresolveIdplugin invite.config.mtsredirects deep imports to the package's publishedesm/build. Drop when MUI icons is upgraded to v6+.millify(2 sites) andreact-activity-calendar(1 site).@emotion/babel-pluginmoved from being passed inline toreact()(no longer supported by@vitejs/plugin-react6) into a dedicated@rolldown/plugin-babelplugin in dev mode.import { ReactComponent as X }→import X from '...?react'across ~50 files, matching the newvite-plugin-svgrdefault. Also fixed a longstanding typo (Celebatory→Celebratory).tsconfig.json: added"node"tocompilerOptions.types. Vitest 3 had been transitively pulling Node ambient types into scope; Vitest 4 stopped, leavingprocess,global,NodeJS.Timeoutundeclared. Explicit opt-in is the right thing anyway.Snapshot churn
All
*.snapupdates are emotion's cache-key prefix changing fromcss-→mui-, with hashes unchanged. The app already usescreateCache({ key: 'mui' })inThemeProvider; under Vite 5 / Vitest 3,@emotion/reactwas loading as two module instances in the test env, so theCacheProviderwas silently bypassed and tests fell back to emotion's defaultcss-cache. Vite 8 deduplicates the dep graph differently, so tests now match what the browser actually renders. Net: snapshots are now consistent with prod, not regressed.cypress-vite patch
Cypress can't compile any spec under Vite 8 because cypress-vite 1.8.0 hardcodes
output.manualChunks = falsefor its UMD spec build, which Rolldown rejects whencodeSplitting: falseis implied. The patch (frontend/.yarn/patches/cypress-vite-npm-1.8.0-5384b5466c.patch) just deletes that override — same fix as upstream PR mammadataei/cypress-vite#137 (open since 2025-10-28, no maintainer activity). Reported as issue #140. Drop the patch when cypress-vite ships a Rolldown-compatible release.pnpm migration note
The patch content is portable, but its wiring is yarn-specific. When the in-flight pnpm migration lands:
.yarn/patches/cypress-vite-npm-1.8.0-5384b5466c.patchtopatches/cypress-vite@1.8.0.patch."cypress-vite": "patch:..."resolution frompackage.json.pnpm.patchedDependenciesblock:pnpm installso it hashes and applies the patch.pnpm 9+ applies patches natively; older versions need
patch-packageas a postinstall step.Original PR description: