May 2025 release
May 21, 2025
Welcome to our May release! In this release, we are bringing Hydrogen up to date with React Router 7.
Hydrogen now on React Router 7
With our May release, Hydrogen now uses React Router 7 as the foundation. Upgrading to Hydrogen 2025.05 will require upgrading your project to React Router 7. Going forward, all future Hydrogen versions will only support React Router 7.
Migrating to React Router 7 is a seamless transition but you must first enable all Remix Future Flags and run a codemod. Let’s get started!
How to upgrade
Make sure you are on Hydrogen 2025.4.0 with all Remix Future Flags turned on! Make sure your storefront is running correctly and commit all changes before proceeding. Follow this document if you haven’t turned on your future flags yet: Hydrogen future flag migration for React Router 7
In your terminal, run
Code Example
npx codemod remix/2/react-router/upgradeAdd react-router.config.ts file with these contents:
Code Example
import type {Config} from '@react-router/dev/config';
export default {
appDirectory: 'app',
buildDirectory: 'dist',
ssr: true,
} satisfies Config;
In vite.config.ts delete all parameters of the reactRouter() plugin. These are just leftovers that the codemod did not clean up.
Code Example
// if you have declared this type augmentation, delete it
- declare module '@remix-run/server-runtime' {
- interface Future {
- v3_singleFetch: true;
- }
- }
...
export default defineConfig({
plugins: [
tailwindcss(),
hydrogen(),
oxygen(),
- reactRouter({
- presets: [hydrogen.v3preset()],
- future: {
- v3_fetcherPersist: true,
- v3_relativeSplatPath: true,
- v3_throwAbortReason: true,
- v3_lazyRouteDiscovery: true,
- v3_routeConfig: true,
- v3_singleFetch: true,
- },
- }),
+ reactRouter(),
tsconfigPaths(),
],
...
Update the hydrogen dependencies to the 2025.5.0 version
Code Example
npm install --force \
@shopify/hydrogen@2025.5.0 \
@shopify/remix-oxygen@3.0.0 \
@shopify/cli@3.80.4
Change env.d.ts: the declare module should be aimed at react-router and you have to add LoaderFunctionArgs and ActionFunctionArgs (reference file here)
Code Example
...
- declare module '@shopify/remix-oxygen' {
+ declare module 'react-router' {
...
+ // TODO: remove this once we've migrated to `Route.LoaderArgs` for our loaders
+ interface LoaderFunctionArgs {
+ context: AppLoadContext;
+ }
+
+ // TODO: remove this once we've migrated to `Route.ActionArgs` for our actions
+ interface ActionFunctionArgs {
+ context: AppLoadContext;
+ }
...
}
Change tsconfig.json: add ".react-router/types/**/*" to include, and add "rootDirs": [".", "./.react-router/types"] reference file HERE
Code Example
{
"include": [
"./**/*.d.ts",
"./**/*.ts",
"./**/*.tsx",
+ ".react-router/types/**/*"
],
"compilerOptions": {
+ "rootDirs": [".", "./.react-router/types"],
"lib": [
...
Add .react-router to the .gitignore file
Now try running npm run codegen and npm run typecheck and npm run dev.
That's it for now. See you in the next release!
Get building
Spin up a new Hydrogen app in minutes.
See documentation