If your Hydrogen dev server has ever broken HMR mid-session, this release is the fix you didn't know you were waiting for. The @shopify/[email protected] update quietly rebuilds Mini Oxygen's development server around Vite's Environment API, shipping full support for Vite 7 and Vite 8 whilst maintaining backwards compatibility with Vite 5+. For headless commerce teams, this is less about new features and more about the foundational stability that makes day-to-day development predictable.
What changed
Previously, Mini Oxygen (the local runtime that powers Hydrogen's dev experience) relied on a custom middleware workaround to handle non-browser runtimes during development. It worked, but it sat outside Vite's core systems, which made HMR less reliable and created edge cases that were difficult to predict or reproduce.
With this release, Mini Oxygen moves to the Vite Environment API, the standard mechanism Vite provides for running non-browser runtimes. The implementation uses a FetchableDevEnvironment, a Vite-native construct that lets the dev server handle fetch-based requests the same way a real edge runtime would, without custom shims sitting in between.
This means Hydrogen's development server now integrates directly with Vite's built-in HMR and module invalidation pipeline. In practice, you get more reliable hot reloads, fewer mysterious dev server restarts, and a local environment that behaves more consistently with your production runtime.
Two additional quality-of-life changes ship alongside this: new projects scaffolded with npm create @shopify/hydrogen will default to Vite 8, and the vite-tsconfig-paths plugin is no longer required in the skeleton template because Vite 8 handles TypeScript path resolution natively.
Why this matters
If you're running a Shopify headless storefront on Hydrogen, the Vite version your project uses is foundational infrastructure. Vite controls your build speed, your development experience, and increasingly, how your application handles server-side rendering in non-browser environments.
-
Build performance: Vite 8 brings continued improvements to build speed and module resolution. For large Hydrogen storefronts with hundreds of product templates and complex component trees, faster builds mean faster deployments and shorter feedback loops for development teams.
-
Ecosystem alignment: By staying current with Vite's latest major version, Hydrogen projects gain access to the full ecosystem of Vite plugins and tooling without compatibility concerns. As the JavaScript ecosystem consolidates around Vite as the default build tool, being on the latest version ensures you're not left maintaining workarounds for deprecated APIs.
-
Developer experience: The shift to the Vite Environment API for Mini Oxygen is more than a technical nicety. It means HMR (the system that lets you see code changes reflected instantly in the browser during development) will be more reliable. Anyone who's had HMR break mid-session on a complex project knows how much productivity this costs.
What you should do
If you're starting a new Hydrogen project
You'll get Vite 8 by default when scaffolding with npm create @shopify/hydrogen. One thing worth noting: vite-tsconfig-paths is no longer needed in your config, so skip it from the start rather than adding it out of habit.
If you're running an existing Hydrogen project on Vite 5 or 6
Backwards compatibility is maintained, so there's no pressure to upgrade immediately. That said, we'd recommend planning your migration within the next quarter before ecosystem drift makes it harder. Before upgrading, work through this checklist:
-
Audit your Vite plugins for compatibility with Vite 8, particularly any that hook into the dev server middleware layer
-
Test your SSR routes thoroughly, since the move to the Vite Environment API changes how non-browser runtimes are handled during development
-
Verify HMR behaviour across your key templates after upgrading, as the new FetchableDevEnvironment handles module invalidation differently than the old middleware approach
For production Hydrogen projects, run your migration on a staging environment first and validate the full storefront before promoting. Have a rollback plan ready: keep your current Vite version pinned in a separate branch so you can revert quickly if anything surfaces in staging that wasn't caught locally.
If you're evaluating Hydrogen for a new build
This release reinforces that Shopify is actively investing in Hydrogen's developer infrastructure. The framework is getting both new commerce features and the kind of foundational tooling upgrades that indicate long-term commitment.
The broader signal
This release is part of a pattern we've been watching across the Shopify ecosystem. Hydrogen updates have shifted from adding commerce features to improving the underlying developer platform, and that's a sign of maturity. When a framework team focuses on building tooling, runtime architecture, and developer ergonomics, it usually means the feature set is stable enough that infrastructure is the bottleneck.
For merchants considering or running headless Shopify, this is encouraging. The risk with any framework is that the team behind it stops investing in the boring-but-critical infrastructure work. Shopify's Hydrogen team is keeping pace with the broader JavaScript ecosystem whilst maintaining the backwards compatibility that production teams need.
The companion releases of @shopify/[email protected], @shopify/[email protected], and @shopify/[email protected] all share the same Vite 8 support, ensuring the entire Hydrogen development stack moves forward together.
If you're running Hydrogen in production and want help planning your Vite 8 migration, or if you're exploring whether headless Shopify is right for your business, get in touch with our team. We've been building on Hydrogen since its early days and can help you navigate these infrastructure decisions with confidence.
