Hydrogen 2025.05: upgrade to React Router 7 (enable Remix future flags, run codemod, adjust config)

[mohab-sameh]

Hydrogen now requires React Router 7; official upgrade includes codemod and several config/file changes. (hydrogen.shopify.dev)

Steps (brief)

• Ensure you’re on Hydrogen 2025.4.0 with all Remix Future Flags on. (hydrogen.shopify.dev)

• Run the codemod:

  npx codemod remix/2/react-router/upgrade (hydrogen.shopify.dev)

• Create react-router.config.ts with satisfies Config. (hydrogen.shopify.dev)

• In vite.config.ts, remove old reactRouter({ presets/future }) params; just call reactRouter(). (hydrogen.shopify.dev)

• Update env.d.ts: switch module augmentation to 'react-router' and add temporary LoaderFunctionArgs / ActionFunctionArgs. (hydrogen.shopify.dev)

• Update tsconfig.json: add ".react-router/types/**/*" to include and [".", "./.react-router/types"] to rootDirs. (hydrogen.shopify.dev)

• Add .react-router to .gitignore. (hydrogen.shopify.dev)

• Bump Hydrogen deps to 2025.5.0. (hydrogen.shopify.dev)

Detect:

• Hydrogen projects not on RR7; missing react-router.config.ts; old vite.config.ts plugin params; old env.d.ts augmentation for @shopify/remix-oxygen.

Edge cases:

• If future flags weren’t adopted, follow the Future Flags guide first. (hydrogen.shopify.dev)

References:

• Hydrogen May 2025 update (official, step-by-step):

  https://hydrogen.shopify.dev/update/may-2025 (hydrogen.shopify.dev)

• Hydrogen changelog note (RR7):

  https://shopify.dev/changelog/hydrogen-may-2025-release (Shopify)

• Future Flags guide:

  https://hydrogen.shopify.dev/update/how-to-adopt-all-future-flags (hydrogen.shopify.dev)