Skip to content

Upgrade to Vite 8 #800

@dmytrotkk

Description

@dmytrotkk

Vite 8.0.0 dropped on March 12, 2026. The headline change is Rolldown replacing esbuild + Rollup as the bundler - expect noticeably faster production builds. We're on Vite 7.1.5 currently.

Our vite.config.ts is minimal (react plugin, tailwind plugin, mdx plugin, path aliases), so the migration should be straightforward. The main things to watch for:

Breaking changes that affect us

build.rollupOptionsbuild.rolldownOptions. We don't use rollupOptions in the root config, but if the metaport package config does (before it gets deleted in the simplification ticket), rename it. The @mdx-js/rollup plugin import may need checking for Rolldown compatibility.

CJS interop changes. Rolldown handles CommonJS imports differently than esbuild did. Some CJS dependencies might break. If something does, there's a temporary escape hatch: legacy: { inconsistentCjsInterop: true } — but the goal is to not need it.

Lightning CSS for minification by default. CSS minification now uses Lightning CSS instead of esbuild. Should be fine for us (likely faster), but verify the output looks correct. Fallback: build.cssMinify: 'esbuild'.

@vitejs/plugin-react — update to latest version that supports Vite 8.

What to do

  • Bump vite to ^8.0.0 in root package.json (and packages/metaport/package.json while it still exists)
  • Update @vitejs/plugin-react to Vite 8-compatible version
  • Check @mdx-js/rollup compatibility with Rolldown — if it breaks, check for an updated version or a Rolldown-native MDX plugin
  • Check @tailwindcss/vite compatibility
  • Check vite-plugin-vercel compatibility (if still used)
  • Run all 5 build targets and compare output sizes
  • Run dev server, verify HMR works

Migration guide: https://main.vite.dev/guide/migration

Acceptance criteria

  • All 5 build targets pass
  • Dev server starts and HMR works
  • No legacy.inconsistentCjsInterop workaround needed (ideally)
  • Build times improved or at least not regressed
  • CSS output renders correctly (Lightning CSS minification)
  • MDX pages render correctly (/faq, /changelog, /terms)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions