Updates

Welcome to our March release! In this release, we’ve added support for Vite 6 and the Remix v3_routeConfig future flag. 

Support for Vite 6

Hydrogen has completed the migration from Vite 5 to Vite 6, following the Remix upgrade to Vite 6 in version 2.16.0. Vite 6 offers performance enhancements and improved HMR (Hot Module Replacement). If you have any custom Vite integrations, please refer to vite migration guide for more information.

Turn on Remix future flag: v3_routeConfig

Remix is merging with React Router 7. Enabling v3_routeConfig future flag is the recommended migration path to React Router 7.

Update your vite.config.ts:

   export default defineConfig({
  plugins: [
    hydrogen(),
    oxygen(),
    remix({
      presets: [hydrogen.v3preset()], // Update this to hydrogen.v3preset()
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_lazyRouteDiscovery: true,
        v3_singleFetch: true,
        v3_routeConfig: true, // add this flag
      },
    }),
    tsconfigPaths(),
  ],

Update your package.json and install the new packages. Make sure to match the Remix version along with other Remix npm packages and ensure the versions are 2.16.1 or above:

"devDependencies": {
 ...
 "@remix-run/fs-routes": "^2.16.1",
 "@remix-run/route-config": "^2.16.1",

Add a routes.ts file. This is your new Remix route configuration file.

export default hydrogenRoutes([
  ...(await flatRoutes()),
  // Manual route definitions can be added to this array, in addition to or instead of using the `flatRoutes` file-based routing convention.
  // See https://remix.run/docs/en/main/guides/routing for more details
]) satisfies RouteConfig;

For more detailed upgrade instructions, see the v3_routeConfig PR or refer to the Remix guide.

To take advantage of all the latest features and improvements in Hydrogen, just run npx shopify hydrogen upgrade. That’s it for the March release — see you in April!

Welcome to our January release! This release supports the latest Storefront API (2025-01) and contains package updates and validation on Remix future flag.

Turn on Remix future flag: v3_lazyRouteDiscovery

Remix introduced lazy route discovery future flag to optimize route manifest delivery. To turn it on, simply add the following line to your vite.config.ts:

export default defineConfig({
 plugins: [
   hydrogen(),
   oxygen(),
   remix({
     presets: [hydrogen.preset()],
     future: {
       v3_fetcherPersist: true,
       v3_relativeSplatPath: true,
       v3_throwAbortReason: true,
       v3_lazyRouteDiscovery: true,  // add this flag
     },
   }),
   tsconfigPaths(),
 ],

For more information, see the v3_lazyRouteDiscovery PR or refer to the Remix guide [https://remix.run/docs/en/main/start/future-flags#v3_lazyroutediscovery].

Cart delivery address update (breaking)

SFAPI 2025-01 updated how cart delivery address is handled (changelog). cart.buyerIdentity.deliveryAddressPreferences is deprecated.

query CartQuery(
  ...
) @inContext(country: $country, language: $language) {
  cart(id: $cartId) {
    buyerIdentity {
      deliveryAddressPreferences {   // deprecated
	 ...
      }
    }
  }
}

Use the new cart.delivery instead.

query CartQuery(
  ...
) @inContext(country: $country, language: $language) {
  cart(id: $cartId) {
    delivery {  // new cart delivery endpoint
      ...
    }
  }
}

To modify the cart delivery address, 3 new mutations are introduced: cartDeliveryAdressesAdd, cartDeliveryAddressesUpdate, and cartDeliveryAddressesRemove. 

To take advantage of all the latest features and improvements in Hydrogen, just run npx shopify hydrogen upgrade. That’s it for the January release — see you next month!