Money from @shopify/hydrogen is a re-export of Hydrogen React Money and requires ShopifyProvider for correct locale formatting

[danielvonmitschke]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2025.7.1

What version of Remix are you using?

No response

Steps to Reproduce

Summary

In a classic Hydrogen + Remix project (based on the templates/skeleton starter), the Money component imported from @shopify/hydrogen is internally a re-export of Money from @shopify/hydrogen-react:

js // in @shopify/hydrogen (dist)
Object.defineProperty(exports, "Money", { enumerable: true, get: function () { return hydrogenReact.Money; } });

Because hydrogenReact.Money uses locale information from the ShopifyProvider context (@shopify/hydrogen-react), correct locale-specific formatting for money values only works if a ShopifyProvider is present in the React tree, even in a Hydrogen (Remix) project.

However, the templates/skeleton example:

• uses Money from @shopify/hydrogen,
• but does not wrap the app in a ShopifyProvider.

This creates an inconsistency: in localized Hydrogen storefronts, Money doesn’t format as expected unless you add a ShopifyProvider manually, which isn’t shown or documented in the skeleton.

---

Environment

• Hydrogen: (e.g. @shopify/hydrogen@2025.7.1)
• Hydrogen React: (e.g. @shopify/hydrogen-react@2025.7.1)
• Storefront API version: e.g. 2025-07
• Runtime: Oxygen
• Project: Created from npm create @shopify/hydrogen@latest → templates/skeleton

Expected Behavior

One of the following (but current behavior is somewhere in between):

1. Hydrogen-only expectation

   • Money from @shopify/hydrogen should:
     • either use only the Hydrogen server-side locale (storefront.i18n) and not depend on ShopifyProvider at all,
     • or at least behave in a way consistent with the Hydrogen (Remix) templates, without requiring additional setup.

   OR

2. Hydrogen + Hydrogen React unified expectation

   • If the recommended usage is now that all Hydrogen apps should also provide a ShopifyProvider (from @shopify/hydrogen-react), then:
     • the templates/skeleton should be updated to wrap the app in ShopifyProvider,
     • and the documentation should clearly state that components such as Money (even when imported from @shopify/hydrogen) depend on ShopifyProvider for correct locale behavior.

Currently, the skeleton template suggests that Money from @shopify/hydrogen works correctly based on the server-side i18n config alone, but in practice the internal re-export of hydrogenReact.Money means that a ShopifyProvider is effectively needed for proper locale formatting in the client.

Actual Behavior

• Money imported from @shopify/hydrogen is implemented as a re-export of Money from @shopify/hydrogen-react.
• As a result, its formatting behavior actually depends on the ShopifyProvider context from @shopify/hydrogen-react, even in a Hydrogen + Remix app.
• In the skeleton template:
  • there is no ShopifyProvider in the client,
  • but Money is still used,
  • leading to locale formatting that doesn’t match the configured storefront.i18n in createStorefrontClient for non-en-US locales unless you manually add a ShopifyProvider.

Possible Resolutions

• Documentation update:

  • Clarify that Money from @shopify/hydrogen is a thin re-export of Hydrogen React’s Money and that a ShopifyProvider context is required for correct locale formatting.
  • Add an example in the Hydrogen docs showing how to wire storefront.i18n into a ShopifyProvider in a Hydrogen + Remix app.

• Template update:

  • Update the templates/skeleton to include a ShopifyProvider in the client tree, wired to the storefront.i18n values from server loader data.

• Implementation change (if desired):

  • Make Money from @shopify/hydrogen explicitly use the server-side storefront.i18n when no ShopifyProvider is present, or otherwise decouple Hydrogen’s usage from Hydrogen React’s assumptions, so Hydrogen users don’t need to add a ShopifyProvider unless they are consciously using @shopify/hydrogen-react.

---

Additional Notes

In my own project, wiring the server-provided storefront.i18n into a client-side ShopifyProvider (from @shopify/hydrogen-react) solves the problem and gives correct locale-aware formatting.

However, given the skeleton template and the way Money is imported, it wasn’t obvious that this extra step was required, and it contradicts the implicit expectation that Hydrogen components from @shopify/hydrogen would rely solely on the Hydrogen server context.