Shopify Discount Function - Missing i18n manager

Topic summary

Issue: After following Shopify’s discount function tutorial, the app throws an “i18n manager” error when loading the embedded discount UI.

Attempted fix: One suggestion was to add I18nContext and I18nManager (internationalization setup) in app/routes/app.jsx with locale set to ‘en’. Another user reported the error persisted even after doing this (screenshots provided).

Working fix: The error was resolved by correcting provider hierarchy and route placement:

  • Correct:
  • Incorrect: Placing outside .

Notes:

  • With the correct provider nesting, adding I18nContext.Provider was not necessary.
  • Outlet is the Remix placeholder for nested routes; DiscountProvider and AppProvider supply required context for the discount UI.

Status: Resolved via proper provider/component structure; no additional i18n setup required when providers are correctly nested.

Summarized with AI on December 20. AI used: gpt-5.

Hi Guys,

I tried following this tutorial https://shopify.dev/docs/apps/selling-strategies/discounts/discount-function-examples/order-minimum-subtotal to Create Shopify Discount Function app

After following all of the steps I am getting following error:

Can anyone help me with this?

I think adding I18nContext to app/routes/app.jsx as follows will solve the problem.

import {I18nContext, I18nManager} from '@shopify/react-i18n';  // <-- add code

export default function App() {
  const { apiKey, host } = useLoaderData();
  const [config] = useState({ host, apiKey });
  const i18nManager = new I18nManager({   // <-- add code
    locale: 'en'
  });

  return (
    
  );
}

I have tried adding the same code, but I still encounter an error.

I had the same issue until I realized was not inside the DiscountProvider Tag. Should be

and I mistakenly had it as

Once I did this I did not need the I18nContext.Provider at all