|
| 1 | +# Hydrogen upgrade guide: 2025.1.2 to 2025.1.3 |
| 2 | + |
| 3 | +---- |
| 4 | + |
| 5 | +## Features |
| 6 | + |
| 7 | +### Add support for `v3_routeConfig` future flag. [#2722](https://github.com/Shopify/hydrogen/pull/2722) |
| 8 | + |
| 9 | +#### Step: 1. Update your `vite.config.ts`. [#2722](https://github.com/Shopify/hydrogen/pull/2722) |
| 10 | + |
| 11 | +[docs](https://remix.run/docs/en/main/start/future-flags#v3_routeconfig) |
| 12 | +[#2722](https://github.com/Shopify/hydrogen/pull/2722) |
| 13 | +export default defineConfig({ |
| 14 | + plugins: [ |
| 15 | + hydrogen(), |
| 16 | + oxygen(), |
| 17 | + remix({ |
| 18 | + presets: [hydrogen.v3preset()], // Update this to hydrogen.v3preset() |
| 19 | + future: { |
| 20 | + v3_fetcherPersist: true, |
| 21 | + v3_relativeSplatPath: true, |
| 22 | + v3_throwAbortReason: true, |
| 23 | + v3_lazyRouteDiscovery: true, |
| 24 | + v3_singleFetch: true, |
| 25 | + v3_routeConfig: true, // add this flag |
| 26 | + }, |
| 27 | + }), |
| 28 | + tsconfigPaths(), |
| 29 | + ], |
| 30 | + |
| 31 | +#### Step: 2. 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. [#2722](https://github.com/Shopify/hydrogen/pull/2722) |
| 32 | + |
| 33 | +[docs](https://remix.run/docs/en/main/start/future-flags#v3_routeconfig) |
| 34 | +[#2722](https://github.com/Shopify/hydrogen/pull/2722) |
| 35 | +"devDependencies": { |
| 36 | + ... |
| 37 | + "@remix-run/fs-routes": "^2.16.1", |
| 38 | + "@remix-run/route-config": "^2.16.1", |
| 39 | + |
| 40 | +#### Step: 3. 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. [#2722](https://github.com/Shopify/hydrogen/pull/2722) |
| 41 | + |
| 42 | +[docs](https://remix.run/docs/en/main/start/future-flags#v3_routeconfig) |
| 43 | +[#2722](https://github.com/Shopify/hydrogen/pull/2722) |
| 44 | +// /app/layout.tsx |
| 45 | +import {Outlet} from '@remix-run/react'; |
| 46 | + |
| 47 | +export default function Layout() { |
| 48 | + const nonce = useNonce(); |
| 49 | + const data = useRouteLoaderData<RootLoader>('root'); |
| 50 | + |
| 51 | + return ( |
| 52 | + <html lang="en"> |
| 53 | + ... |
| 54 | + <Outlet /> |
| 55 | + ... |
| 56 | + </html> |
| 57 | + ); |
| 58 | +} |
| 59 | + |
| 60 | +// Remember to remove the Layout export from your root.tsx |
| 61 | + |
| 62 | + |
| 63 | +#### Step: 4. Add a `routes.ts` file. This is your new Remix route configuration file. [#2722](https://github.com/Shopify/hydrogen/pull/2722) |
| 64 | + |
| 65 | +[docs](https://remix.run/docs/en/main/start/future-flags#v3_routeconfig) |
| 66 | +[#2722](https://github.com/Shopify/hydrogen/pull/2722) |
| 67 | +import {flatRoutes} from '@remix-run/fs-routes'; |
| 68 | +import {layout, type RouteConfig} from '@remix-run/route-config'; |
| 69 | +import {hydrogenRoutes} from '@shopify/hydrogen'; |
| 70 | + |
| 71 | +export default hydrogenRoutes([ |
| 72 | + // Your entire app reading from routes folder using Layout from layout.tsx |
| 73 | + layout('./layout.tsx', (await flatRoutes())), |
| 74 | +]) satisfies RouteConfig; |
| 75 | + |
| 76 | +---- |
0 commit comments