Skip to content

πŸ›[Bug] Locale not working and components always show english translationsΒ #213

@mcorraodab

Description

@mcorraodab

Dear team,

Please find below details of an issue that I've just found while trying to build a new discount app.

Issue summary

The language is not localized by AppProvider. AppProvider does not localize the language. No matter which language is specified, the display will always be in English. I have specified the following
By the way, this is the same issue that was described on issue #60
That old issue mentioned that the problem was presumably caused by the way the i18nManager was loading the locales, which was specifically for Webpack. However, it should be also compatible with Vite as this is the way latest Shopify CLI scaffolds a fresh new app.

I'm using latest code and followed official documentation (check steps below)

Expected behavior

When creating a new discount, texts should be localized and shown in specified supported locale, e.g., spanish.

Actual behavior

When creating a new discount, texts are not localized and always showing english (fallback)

Steps to reproduce the problem

  1. Create an app using latest Shopify CLI (3.62.0) with Remix template, as explained here
  2. Follow the tutorial here (Javascript selected as language):
  3. Build UI according to this doc
  4. Execute npm install && npm run dev
  5. Change locale on app/components/providers/DiscountProvider.jsx as code below (anything different from english, such as "es-AR" or "es")
import { AppProvider } from "@shopify/discount-app-components";
import "@shopify/discount-app-components/build/esm/styles.css";
export function DiscountProvider({ children }) {
  return (
    <AppProvider locale="es-AR" ianaTimezone="America/Buenos_Aires">
      {children}
    </AppProvider>
  );
}
  1. Try to create a new discount using this new app
  2. Confirm locale is still english (for components that come within this package)

Specifications

  • Are you using the React components? (Y/N): Y
System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 2.34 GB / 15.47 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.110
    Chromium: 126.0.6478.55
  npmPackages:
    @shopify/discount-app-components: ^3.0.0 => 3.0.0 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 

Thank you in advance!

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions