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",

Move the Layout component export from root.tsx into its own file. Make sure to supply an <Outlet> so Remix knows where to inject your route content.

// /app/layout.tsx
import {Outlet} from '@remix-run/react';

export default function Layout() {
  const nonce = useNonce();
  const data = useRouteLoaderData

// Remember to remove the Layout export from your root.tsx

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

import {flatRoutes} from '@remix-run/fs-routes';
import {layout, type RouteConfig} from '@remix-run/route-config';
import {hydrogenRoutes} from '@shopify/hydrogen';

export default hydrogenRoutes([
  // Your entire app reading from routes folder using Layout from
  layout.tsx layout('./layout.tsx', (await flatRoutes())),
]) 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!